New <div> driving me nuts!

[duke]

I wanted to create a new div in the top right of my header to contain a flag image but when I place the new div in the header either the new div "UK_flag" or existing "right_header" align to the right but not both. It's as though one is in the way of the other. I've given them both black backgrounds so it's easy to see where they are.

I already have two div's to the left of the header that behave.

How do I get both div's to align right?

header test

and the CSS.

Code: Select all

#header {background:#2EB1DB; border:3px solid #000000; width:1044px; height:155px;  border-radius:25px;}
#left_header { float:left; padding:20px; margin-top:20px; color:#ffffff; font-size:55px; text-shadow:1px 1px 5px #000000;}
#location {float:left; padding:0px 0px 0px 20px; text-align:left; font-size:15px; color:#000000; text-shadow:1px 1px 3px #ffffff;}
#uk_flag {background: #000; float:right; padding:5px; margin-top:5px; text-align:right;}
#right_header {background: #000; float:right; padding:5px; margin-top:95px; color:#ffffff; font-size:20px; text-align:right; text-shadow:1px 1px 4px #000000;}

Header:

Code: Select all

<div id="header">

<div id="left_header"><strong>Nightingale Weather.</strong></div>
<div id="uk_flag"><img alt="UK Flag" src="images2/UK-flag.gif"/></div>
<div id="right_header"><strong>Weather from Eastleigh,<br>
	Live on the web.</strong></div>
<div id="location"><strong>Latitude: N 50&deg; 57' 58" - Longitude: W 01&deg; 22' 51" - Altitude: 26 meters.</strong></div>

  </div> 

I do have the flag image showing on my "working site" but I have included the image in the "right_header" div which is not what I wanted to do.

Duke

[mcrossley]

I would put the flag and the text in the same div, and alter the top margin.

Code: Select all

<div id="right_header">
 <img alt="UK Flag" src="images2/UK-flag.gif"><br>
<strong>Weather from Eastleigh,<br>
	Live on the web.</strong>
</div>

[duke]

That's exactly what I did in the end.

Forgetting the flag for now. Why will these two div's not float right on top of each other? I even tried increasing the height of the header in case space was a problem.

Duke

(original post updated with header)

[daj]

Float can be a bit of a black art! Try not to mix right and left. In your case I would float everything left and set widths....

#header {background:#2EB1DB; border:3px solid #000000; width:1044px; height:155px; border-radius:25px;}
#left_header { width: 600px;float:left; padding:20px; margin-top:20px; color:#ffffff; font-size:55px; text-shadow:1px 1px 5px #000000;}
#uk_flag {background: #000; float:left; padding:5px; margin-top:5px; text-align:right;}
#right_header {background: #000; float:left; padding:5px; margin-top:5px; color:#ffffff; font-size:20px; text-align:right; text-shadow:1px 1px 4px #000000;}

So what you are in effect doing is making three blocks, all pushed up against each other on the left. Set the width (especially of the first one, I set it to 600px)

You also seemed to set a top margin of 95px in the right_header which seems wrong, so I changed it to 5 just for this test

Which will give you this...

floating.png

Some playing with padding-top and padding-left in the #uk_flag and #right_header will give you good layout.

One final tip -- when floating, always consider the next div, as it could end up tagged on to the left/right of the previous rather than on a new line, so in your case add.. "clear: both;" into #menubar. This basically says, regardless of what floating was happening, stop floating and start normal.

[duke]

Hi daj.

Good to see you back.

I didn't consider floating all the divs left . Think I need to spend some time "playing" with divs.

The reason for the top margin of 95px was because I was trying to get the words (#right_header) under the flag (#uk_flag).

I have added "clear:both;" as you advise.

Thanks for your input.


Duke