"float" seems to negate <div> styling - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

"float" seems to negate <div> styling

godfrey tan2001

7:33 am on May 25, 2013 (gmt 0)

10+ Year Member

<!DOCTYPE html>
<head>
<style>
div#container {
width:500px;
}

div#header {
background-color:#FFA500;
}

div#menu {
background-color:#FFD700;
height:200px;
width:100px;
float:left;
}

div#content {
background-color:#EEEEEE;
height:200px;
width:400px;
float:left;
}

div#footer {
background-color:#FFA500;
}



</style>
</head>

<body>

<div id="container">

<div id="header">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content">
Content goes here</div>

<div id="footer">
<ul id="footermenu">
<li><a href="#">Welcome</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Location</a></li>
</ul>
</div>

</body>
</html>

Hi, can someone help? I am trying to create a horizontal footer menu at the bottom. When I float the <ul> items, the entire color of div#footer disappears.

Godfrey

birdbrain

8:14 am on May 25, 2013 (gmt 0)

Hi there godfrey tan2001,

and a warm welcome to these forums. ;)

Try it like this...


div#footer {
   clear:both;     /* to clear the floated elements above */
   overflow:hidden;  /* to contain the elements within */
   background-color:#FFA500;
 }

Further reading:-

[quirksmode.org ]
[sitepoint.com ]

birdbrain

godfrey tan2001

12:14 pm on May 25, 2013 (gmt 0)

10+ Year Member

Hello Sir,

Sorry I can't bring myself to call you by your nickname. You are far more intelligent than it suggests...haha..

But thank you very much...I will try out the code.

Much appreciated

godfrey tan2001

12:22 pm on May 25, 2013 (gmt 0)

10+ Year Member

Sir,

THANK YOU...THANK YOU...THANK YOU...it works...

Much appreciated...

birdbrain

12:33 pm on May 25, 2013 (gmt 0)

Hi there Godfrey,

No problem, you're very welcome. ;)

As I experience ever increasing attacks of "Senior Moments",
I believe that my name is actually very appropriate :)

birdbrain

godfrey tan2001

12:40 pm on May 25, 2013 (gmt 0)

10+ Year Member

Sir,

Quick question. Are the floated elements you are referring to the div#menu and div#contents elements?

No not quite sure how clear works in this case. I know what w3school says but don't see it here..

birdbrain

1:01 pm on May 25, 2013 (gmt 0)

Hi there Godfrey,

that is correct. ;)

Floated elements are taken out of their natural flow.

This can cause the following element to disappear under them,
and explains the need for the "clear:both" attribute.

The links that I supplied will give explanations in finer detail. ;)

birdbrain

godfrey tan2001

1:11 pm on May 25, 2013 (gmt 0)

10+ Year Member

Dear Sir,

Ah I see...once and again..THANK YOU...

Godfrey

lucy24

6:05 pm on May 25, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Incidentally...

A lot of the CSS is over-constrained. It won't prevent the rules from working, but it puts the browser to extra work. Since an id is by definition unique,

div#somename

is the same as

#somename

alone... unless you've got shared CSS and the same id is used for divs on one page and paragraphs on another. (I do not recommend this :))

Similarly
div#footer ul#footermenu li
is almost certainly more information than needed. Will "footermenu" ever serve as the id of something other than an unordered list? Will the footer menu ever occur outside of the footer div? Are there other rules for
div ul li
that you need to override?

godfrey tan2001

5:04 am on May 27, 2013 (gmt 0)

10+ Year Member

Hi lucy24,

Thank you for your inputs. I guess I was just being as explicit as possible. Firefox seems to work faster as per your suggestion. I have recoded according to your suggestion.

Your guidance is much appreciated. I have learnt alot...

Godfrey

godfrey tan2001

6:36 am on May 27, 2013 (gmt 0)

10+ Year Member

Hi,

Got a question...

my html code...

<ul id="menu">...
<li>Welcome
<ul class="submenu">
<li>something 1</li>
<li>something 2</li>
</ul>
</li>
<li>Contact Us</li>
......
</ul>

My CSS code like this could only work to remove the float:
#menu {
float:left;
}

#menu .submenu {
float:none;
}

Like this did not work:
#menu {
float:left;
}

.submenu {
float:none;
}

I thought the id or class alone could overide the attributes but seems like you need to state the hierarchy explicitly, but seems not.

Appreciate if you could enlighten me...

godfrey tan2001

7:04 am on May 27, 2013 (gmt 0)

10+ Year Member

Hi lucy24,

There was not over-ride in my 1st code. I have removed all the div, ul before the ids'.

Godfrey