Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Understanding div qualities and floats

    Hello, I'm new to floating and layouts and I'm having a little trouble understanding floating some divs with unordered lists nested inside them. I would like to understand my problem not just fix it as it seems I already know the solution but don't understand why it works.

    Please forgive the overly bloated html code. I know it can be trimmed and will do so after I understand my problems.
    Code:
    <div id="header">
    
    </div>
    
    <div id="someHorNavBar">
    	<div id="nav1" class="nav">
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="">Portofilio</a></li>
    			<li><a href="">Contact us</a></li>
    			<li><a href=""></a></li>
    		<ul>
    	</div>
    </div>
    
    <div id="someVerNavBar1">
    	<div id="nav2" class="nav">
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="">Stationary</a></li>
    			<li><a href="">Resume</a></li>
    			<li><a href=""></a></li>
    		</ul>
    	</div>
    </div>
    
    <div id="content">
    	<p></p>
    <div>
    
    
    <div id="someVerNavBar2">
    	<div id="nav3" class="nav">
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="">Stationary</a></li>
    			<li><a href="">Resume</a></li>
    			<li><a href=""></a></li>
    		</ul>
    	</div>
    </div>
    Here is my CSS code:

    Code:
    #header, #someHorNavBar {
    	width: 100%;
    }
    
    #someVerNavBar1, #someVerNavBar2 {
    	width: 30%;
    }
    
    #content {
    	width: 40%;
    }
    
    #someVerNavBar1, #content, #someVerNavBar2 {
    	float: left;
    }
    
    /* Global Style for navigation bars */
    ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    #someHorNavBar ul li {
    	float: left;
    }
    
    ul li a {
    	display: block;
    }
    
    #header, #someVerNavBar1, #someVerNavBar2 {
    	background-color: black;
    }
    
    #someHorNavBar, #content {
    	background-color: red;
    }
    Once again please excuse the slop of markup since I have not yet trimmed it and made it efficient. Also note that I have background-color only to show content and padding of divs.
    Here's my question. I'm trying to make a three column layout. I understand that I can get my three column layout if I insert this somewhere throughout the code:
    #someVerNavBar1 {
    clear: left;
    }

    What I don't understand is why do I have to clear the someVerNavBar1 when the floated list should be nested inside of a div. I thought that div's act like some sort of block elements containing a new context type of area for inner elements. So why does it seem that css is treating the flow of code as though its just one unordered lists next to another div whereby one list is all floating to the left and the div is floating next to it.

    As I tinkered to try and understand more I grew more confused when I commented out the floating for the HorNavBar li's. I now got an effect of what looks like two divs ramming up into the padding of the HorNavBar. I know that it is not the padding as when I zero out my margins and padding the same effect persists.

    Please help me understand why this is all happening. I know how to solve it but it doesn't do me any good if I continue to get problems like this in a more obscure environment.

  • #2
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry everyone, I just noticed that for my second problem there was nothing wrong. If I had color coded every div differently I would have noticed that its not that the Ver divs are running into the padding of the Hor div, its just that the Hor and content div's have the same color codes. Really dumb mistake.

    I'm also realizing that my problem has to do with a concept known as float containment. It would seem that when you float all elements within a element the containing element's height zeroes out. I'm guessing this is what's happening to my Hor div and I'm also guessing this means that the float element is being treated as an element outside of the div therefore being the next element in contact with the first Ver div.

    The two solutions given in my book are:
    1) float the containing element in the same direction as the first containing element and set the width of the containing element to 100%
    2) set an overflow property of the containing element to auto or hidden and set the width of the containing element to 100%.

    Now what I would still like clarification on is why does the height zero out for a containing element when all its elements float? is this just a defined behavior that must be accepted?

    Also why does floating left solve this problem?
    Why does the second solution of overflow work when it would seem that the ul is being given its own block rather than just being pushed out of the Hor div's background-color and content/padding area.

    Any help would be greatly appreciated.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    For starters, the first <ul> section needs an end tag you forgot the slash </ul> Same with
    Code:
    <div id="content">
    	<p></p>
    <div>
    you need </div>.

    Now what I would still like clarification on is why does the height zero out for a containing element when all its elements float?
    They don't. A div will expand in height to show content unless you give it a height, which you didn't. When you do not define a height and put nothing in a div it has zero height.

    To show you I have modified your style colors and used a place holder (A *) and in the case of the <p>, an 8. So we have some height.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    #header, #someHorNavBar {
    	width: 100%;
    	background-color: blue;
    }
    #someVerNavBar1, #someVerNavBar2 {
    	width: 30%;
    }
    #content {
    	width: 40%;
    }
    #someVerNavBar1, #content, #someVerNavBar2 {
    	float: left;
    }
    /* Global Style for navigation bars */
    ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    #someHorNavBar ul li {
    	float: left;
    }
    ul li a {
    	display: block;
    }
    #header, #someVerNavBar1 {
    	background-color: black;
    }
    #content {
    	background-color: red;
    }
    #someVerNavBar2{background-color: pink;}
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="someHorNavBar">*</div>
    <div id="someVerNavBar1">*</div>
    <div id="nav2" class="nav">*</div>
    <div id="content"><p>8</p></div>
    <div id="someVerNavBar2">*</div>
    </body>
    </html>
    <div id="content"><p>8</p></div> is taller then the other divs because of the paragraph it contains.
    Evolution - The non-random survival of random variants.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Normally divs appear under each other. This is the normal flow of things. We can take things out of the normal flow by using positioning or floats. To get thing back to normal we have to clear the floats.

    As for making a three column layout: Where do you want the #content div?
    You could place it IN the #someVerNavBar2 div or you could put the #someVerNavBar2 inside of the #content div.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    #someHorNavBar, #someVerNavBar1, #someVerNavBar2 {
    	width: 30%;
    	float: left;
    }
    #someHorNavBar {
    	background-color: teal;
    }
    #someVerNavBar1 {
    	background-color: black;
    }
    #someVerNavBar2{background-color: pink;}
    </style>
    </head>
    <body>
    <div id="header"></div>
    
    <div id="someHorNavBar">*</div>
    <div id="someVerNavBar1">*</div>
    <div id="someVerNavBar2">*</div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •