Solved

CSS two column layout with border around the entire content area

Posted on 2009-07-01
2
385 Views
Last Modified: 2013-11-19
I'm messing around with a typical fixed width two column layout and i'm trying to get a border around the entire content area. There is content in the left_column that goes below the border. What am i doing wrong?
<style type="text/css">

body {

	background-color:#9EBBEB;

	background-image:url(Gradient%20Background.jpg);

	background-position:top left;

	background-repeat:repeat-x;

	margin-left:auto;

	margin-right:auto;

	margin-top:0;

	padding-top:0;

}

#header {

	margin:0;

	padding-bottom:200px;

}

#shadow {

	background-image:url(DropShadowGradient.png);

	background-position:top center;

	background-repeat:repeat-y;

	margin:0;

	padding:0;

}

#container {

	margin-left:auto;

	margin-right:auto;

	width:780px;

	background:url(Header.jpg) top no-repeat;

	background-color:#444444;

	

}
 
 
 

#tabArea {

	list-style:none;

	text-align:left;

	padding:0;

	margin:0;

	

}

li.navLink a {

	

	color:#FFFCE8;

	text-decoration:none;

	font-weight:bold;

	font-family:"Copperplate Gothic Light";

	font-variant:small-caps;

	font-size:14px;

	padding:0 0 0 7px;

	margin:0;

}
 
 

li.navLink a:hover {

	

	

}

li.navLink {

	display:inline;

	padding:0;

	margin:0;

}

img.links {

}

#content_2 {

	display:none;

}

div.content {

	padding:0 10px 10px 10px;

	background-color:#FFFFFF;

	border:solid #353535;

	margin:0;

	padding:10px;
 

}

div.right_column {

	

	margin-left:520px;

	background-color:#00CC66;

}

div.left_column {

	float:left;

	width:500px;

}
 
 
 
 

</style>

</head>

<body>

<div id="shadow">

	<div id="container">

    	<div id="header">

        

        </div>

    	<div id="nav">

        	<ul id="tabArea">

            	<li class="navLink" id="first"><a href="#" title="content_1" class="tab">Home</a></li>

                <li class="navLink"><a href="#" title="content_2" class="tab">Portfolio</a></li>

            </ul>        

        </div>  

        <div id="content_1" class="content">

        	<div id="left_column_1" class="left_column">

        		<h1>Creative Solutions <small>Idea's that Make Money</small></h1>

            	<p>Specializing in highly interactive website design and development, let us help you create something that will be provide information and attract customers.</p>

            	<ul id="services">

            		<h2>Services we offer</h2>

            	    <li>Website Design</li>

            	    <li>E-Commerce</li>

            	    <li>Content Management</li>

            	    <li>Custom Programming</li>

            	    <li>Logo design</li>

            	</ul>

         	</div> 

        	<div id="right_column_1" class="right_column">

            	<h3>This is the right column</h3>

                <p>ejwio we jwe ojew oijw jew howe owe jewh ewhojew ;jwej ewho ew hoew oiew ewjew ewj</p>

        	</div>

   		</div>

        

        

        

        

        <div id="content_2" class="content">

        	

           		<h1>Page 2</h1>

            	<p>This is fucking Gay</p>

            	<h1>Wazzuppppp</h1>

                

      	</div>

    </div>

</div>

</body>

</html>

Open in new window

0
Comment
Question by:toymachiner62
2 Comments
 
LVL 4

Accepted Solution

by:
khsater earned 250 total points
ID: 24759302
Adding overflow: hidden to div.content fixes it.
I'm no expert, so I have no clue why.
0
 
LVL 2

Author Comment

by:toymachiner62
ID: 24759321
Can anyone explain to me why this is?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 45
Basic JavaScript Question 3 38
Add animation to your css 12 32
How to count in a table in php 22 19
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now