Fixed vs Fluid – Banner trouble

  • Clicky

    Ive been toying about with banner sizes and trying to work out the best design to create my blog.

    Screen is a fixed width of 990px, and the banner image is also 990px wide. Its aligned center.
    – However, the right column appears to not be parallel to the banner image. How can I fix this?

    Or any overall suggestions on the best practise for setting this up. Perhaps I should adopt back to a Fluid design?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Its very difficult to figure out what you’ve done by looking at a screenshot. I guessing that you’ve got margins or paddings in there that are throwing off the alignment.

    Personally, since you asked, build it fluid. I don’t know if that is ‘best practice’ but fixed width sites look very dated to me, look ugly on large screens and are hard to navigate on small screens (unless fixed to a very small size)– like netbook screens, for example.

    Thread Starter jakc

    (@jakc)

    since you asked, build it fluid

    So, do I have to do some fancy things to my banner image, like add in separate images, and make a single colour part of the banner ‘stretch’ when browsers are resized?

    Again, it is difficult to help when all I have is a screenshot but yeah, you’ll probably need to edit your header some. Except for the text it looks like it would stretch pretty well already though.

    Thread Starter jakc

    (@jakc)

    you’ll probably need to edit your header some. Except for the text it looks like it would stretch pretty well

    Actually the text is part of the image.

    Can you provide any info on how I go about ‘stretching’ my image.
    Are you talking about adding in a bar thats a solid colour and somehow using the magic of CSS, make it stretch?

    Any more detailed help on this would be really appreciated.

    Thread Starter jakc

    (@jakc)

    I guess id like to replicate what is on this site

    Ive been trying to use Firebug to understand if they have a fixed or fluid design. Is it fixed at 769px wide?

    I’d count that one as a fixed design. Its fixed at 770px (look at #container) but the margins are set to auto so it centers in the window.

    If you load an image inside a containing element like a div then set width:100% on that image, it will stretch or shrink to fill the containing element. You don’t want to stretch images too much or the resolution goes to crap but you have a big image anyway. It shouldn’t be a problem. Despite what I said earlier, even the text of you header might stretch ok, since the image takes up most of the page anyway.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fixed vs Fluid – Banner trouble’ is closed to new replies.

Tags