Columns all messed up CSS

andwfara1 · 01-11-2013, 04:19 PM

What am I doing wrong here -

HTML:

Code:

<body>
<div id="header-container">
	<div id="header-content">
    	<div class="logo"></div>
        <div class="quick-nav"></div>
        <div class="phone-number"></div>
    </div>
</div>
<div id="menu-container">
	<div id="menu-content">
    	<div class="top-menu"></div>
    </div>
</div>
<div id="rotator-container">
	<div id="rotator-content"></div>
</div>
<div id="cta-container">
	<div id="cta-content"></div>
</div>
<div id="middle-container">
<div id="body-container">
	<div id="content-container">
    	<div id="col1">
        	<ul>
            	<li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <div id="col2">
        	<h3>Welcome - Headline goes here</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim nunc, dapibus eu pulvinar non, ornare sit amet augue. Curabitur eget augue placerat tortor cursus sodales non quis tortor. Ut facilisis, augue id luctus ultricies, est lectus placerat nisl, id sodales tellus leo quis urna. Morbi eget purus tellus, et porttitor leo. Maecenas facilisis leo eget lorem bibendum porttitor. Curabitur id egestas tortor. Integer sit amet pellentesque ipsum. Etiam iaculis sapien sed neque accumsan vitae rutrum massa adipiscing. Mauris ornare auctor suscipit.</p>
            <p>Suspendisse potenti. Quisque iaculis consequat elit, sed congue turpis pharetra vitae. Curabitur vehicula ligula non tellus fringilla faucibus eu id lacus. Aenean dignissim ligula suscipit libero adipiscing et fringilla nibh rhoncus. Fusce suscipit ultrices accumsan. Sed aliquet lorem vel mi molestie tempus. Sed porttitor mollis vestibulum. Quisque tristique nisl tristique odio mattis posuere.</p>
            <p>Nunc non est sed lacus condimentum tempus quis vel ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque at facilisis lorem. Sed ante velit, sodales sit amet pharetra non, euismod id risus. Ut viverra neque ut nunc congue porta. Etiam lorem erat, iaculis sit amet iaculis quis, ullamcorper sit amet lectus. Nulla ut tempus orci.</p>
        </div>
    </div>
</div>
</div>
<div id="footer-container">
	<div id="footer-content"></div>
</div>
</body>

and my CSS:

Code:

@charset "utf-8";
/* CSS Document */

body{margin:0; padding:0; background:url(images/bg.jpg) repeat; display:block;}
.clear, .clearfix{clear:both;}

#middle-container{width:1007px; margin-left:auto; margin-right:auto;}
#middle-container #body-container{clear:left; float:left; width:100%; overflow:hidden; background:#F4E2C3; padding-bottom:21px;}
#middle-container #body-container #content-container{float:left; position:relative; width:232px; left:10px; top:11px; bottom:11px; right:764px; border:1px solid #B6A58E;}
#middle-container #body-container #content-container #col1{float:left; position:relative; width:230px; top:12px; padding-bottom:20px;}
#middle-container #body-container #content-container #col2{float:left; position:relative; width:674px; left:266px; top:12px; padding-bottom:40px;}

any thoughts, suggestions plz

not sure why my right side content is all the way down the container instead of aligning w/ the top of the document like it should. the design idea is pretty self-explanatory.

Thanks for your help in advance!

Excavator · 01-11-2013, 05:13 PM

Hello andwfara1,
You float #content-container, #col1 and #col2 ...and you position them as well. Two different things there.

At 232px wide #content-container is your left column but you put #col2 inside it.

Look at this example of how simple a two column layout can be.

You are also nesting div elements inside each other too much. That's called divitis. See what divitis is and how to avoid ithere.

Look at your code a little differently here -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background: url(images/bg.jpg) repeat;
}
#middle-container {
	width: 1007px;
	margin: 50px auto;
	overflow: auto; /*to clear the floats*/
	background: #F4E2C3;
	padding: 21px;
}
#content-container {
	width: 232px;
	float: left;
	padding: 0 0 200px; /*to simulate content*/
	border: 1px solid #B6A58E;
}
#col2 {
	margin: 0 0 0 250px;
	padding-bottom: 40px;
}
</style>
</head>
<body>
    <div id="middle-container">
        <div id="content-container">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        <!--end content-container--></div>
        <div id="col2">
            <h3>Welcome - Headline goes here</h3>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!--end col2--></div>
    <!--end middle-container--></div>
<div id="footer-container">
	<div id="footer-content"></div>
</div>
</body>

andwfara1 · 01-11-2013, 07:13 PM

Thanks for your help! I will definitely look at the divitis topic - definitely something my boss has raised an eyebrow about as well.

Problem Solved!