I have a header div, I'd like to position two images within that div. One will always align left, one will always align centre. If the window is resized the images move up to one another but they don't overlap, if the window is stretched the space between the images should increase.

I've tried to float left etc but that messes up the columns in the page below the header. I can get both images to align center or both to align left, but I'd rather not rely on the position of the left image for the position of the center image.

I'm currently using three divs, the header, logo and title and I have a text-align:center; on the parent (header) div.

A diagram of what I mean:

alt text

2 answers

2
points
This was chosen as the best answer

Make sure all divs have defined widths and heights, especially the middle blue one. Float the black one left, and margin 0 auto the blue box.

If that messes up your columns below, add a clear:both to the big div around the columns. Hopefully that should work/you haven't tried that yet.

Answered over 6 years ago by Tom Guthrie
  • Thank you, I'd modified it from my DW template and your post reminded me I didn't have a div around the main page, only the page container. A div surrounding the content between the header and footer and a float left on the logo div did the trick! MrXexxed over 6 years ago
  • Glad to have been of help :D Tom Guthrie over 6 years ago
1
point

What you're looking for is to create a liquid layout. And by that I mean, instead of using pixels to size your div elements, you should be using percentages (%). It's much more useful to use percentages instead of pixels in certain cases so that the website can re-size according to the visitors resolution / browser size / whatever.

Try out the code below; don't forget to adjust the width of each element according to your needs.

CSS:

div#header {
 margin: 0 auto;
 width: 90%;
} 

div.column1, div.column2 {
 text-align: left;
}

div.column1 {
 float: left;
 width: 33%;
}

div.column2 {
 float: left;
 width: 66%;
}

HTML:

<div id="header">
    <div class="column1"> Image 1 </div>
    <div class="column2"> Image 2 </div>
    <div style="clear:both"></div>
</div>

The reason why the floated elements broke your site before is probably because you forgot to clear them. Floats are used to make a particular element free-flow amongst the rest of the content. It is required to clear:both (clear floats) if you wish to use it as a layout constructor.

Answered over 6 years ago by Vinny Burgh