homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
"float" seems to negate <div> styling
godfrey tan2001




msg:4577684
 7:33 am on May 25, 2013 (gmt 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

 

birdbrain




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

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


birdbrain

godfrey tan2001




msg:4577710
 12:14 pm on May 25, 2013 (gmt 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

godfrey tan2001




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

Sir,

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

Much appreciated...

birdbrain




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




msg:4577714
 12:40 pm on May 25, 2013 (gmt 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..

birdbrain




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




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

Dear Sir,

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

Godfrey

lucy24




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

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




msg:4578064
 5:04 am on May 27, 2013 (gmt 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

godfrey tan2001




msg:4578072
 6:36 am on May 27, 2013 (gmt 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...

godfrey tan2001




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

Hi lucy24,

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

Godfrey

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved