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 Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Nested 3 column div layout. can't get right floated element inside parent?

    I have a nested 3 column as a header menu on my site and I just can't get the right floated column to stay in its parent container. I don't know what I'm doing wrong. Can someone shed some light? Many thanks.

    Here is the code


    Code:
    <div id="container">
    
    <div id="title"> Title </div>
    
    <div id="menubarcontainer">
    
    <div id="left"> Left</div>
    <div id="middle"> Middle </div>
    <div id="right"> <a href="indexblog.html">Right</a></div>
    </div>
    
    </div>
    and here the relevant style snippet


    Code:
    #container {
    	position:relative;
    	width: 989px;
    	padding: 20px 20px 20px 20px;
    	margin-left:auto;
    	margin-right:auto;
    	height: 100%;
    	background-color:white;
    	overflow:hidden;
    }
    
    
    #thumbswrap {
    	width: 989px;
    	position:relative;
    	margin-top:40px;
    	height: 1000px;
    }
    			
    
    
    #title {
    	width: 989px;
    	height: 38px;
    	top: 20px;
    	left: 20px;
    	color:#009;
    	text-align:center;
    	border-bottom-color:black;
    	border-bottom-width:1px;
    	border-bottom-style:solid
    	}
    	
    #menubarcontainer {
    	position:relative;
    	width: 989px;
    	height: 15px;
    	margin-top:7px;
    	background-color:green;
    		}
    
    
    #left {
    	position:relative;
    	float:left;
    	height:15px;
    	width: 200px;
    	left: 0px;
    	clear:none;
    }
    
    #middle {
    	width: 200px;
    	height:15px;
    	text-align:center;
    	margin-left:auto;
    	margin-right:auto;
    	clear:none;
    	}
    
    
    #right {
    	float:right;
    	text-align:right;
    	width: 100px;
    	height:15px;
    	right: 0px;
    	top:0px;
    	z-index:+1;
    	clear:none;
    }
    Here is a link to a working example http://test.venndiagram.eu/menucontainer.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello valentine,
    What happens when you change the order of your markup so the floats come first?
    Like this -

    Code:
    <div id="left"> Left</div>
    <div id="right"> <a href="indexblog.html">Right</a></div>
    <div id="middle"> Middle </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello valentine,
    What happens when you change the order of your markup so the floats come first?
    Like this -

    Code:
    <div id="left"> Left</div>
    <div id="right"> <a href="indexblog.html">Right</a></div>
    <div id="middle"> Middle </div>

    Hi Excavator. I seem to have fixed this with trial and error. I set the width of my columns using percentages and I think I'd forgotten to float one of them left.

    It now does what I wanted it to do. Here is what I changed it to in case it helps anyone.

    I'm posting the code in case this helps anyone but this doesn't come from an expert, I just got there through trying it:

    Code:
    #left {
    	float:left;
    	height:15px;
    	width: 20%;
    	float:left;
    }
    
    #middle {
    	float:left;
    	width: 60%;
    	height:15px;
    	text-align:center;
    	clear:none;
    	}
    
    
    #right {
    	float:right;
    	text-align:right;
    	width: 20%;
    	height:15px;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at this example of a 3 column layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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