Sandaysoft

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.


Header:


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

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

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

_________________
Mark
Wilmslow Astro Weather

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)

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK

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...


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.

_________________
David
Contact Me

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

_________________
Duke

Nightingale Weather PHP
Eastleigh, Hampshire, UK