Welcome to WebmasterWorld Guest from 54.166.189.88

Forum Moderators: not2easy

Message Too Old, No Replies

"float" seems to negate <div> styling

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

New User

joined:May 25, 2013
posts: 20
votes: 0


<!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;
}

<!--Problem lies in this section
div#footer ul#footermenu li{
display:block;
float:left;
padding:0 10px;
}
-->

</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
8:14 am on May 25, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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

  1. [quirksmode.org ]
  2. [sitepoint.com ]


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

New User

joined:May 25, 2013
posts: 20
votes: 0


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
12:22 pm on May 25, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Sir,

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

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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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
12:40 pm on May 25, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


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..
1:01 pm on May 25, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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
1:11 pm on May 25, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Dear Sir,

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

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

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13744
votes: 462


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?
5:04 am on May 27, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


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
6:36 am on May 27, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


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...
7:04 am on May 27, 2013 (gmt 0)

New User

joined:May 25, 2013
posts: 20
votes: 0


Hi lucy24,

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

Godfrey
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members