2 column design problem

Question

vmpchris

14 Years Ago

Hey. I am new here so sorry if this is in the wrong place.

I am just starting to learn html and css and I was following some tutorials, in the tutorials they made a 2 column website but on column doesn't work properly and they didn't show how to fix it in css. So I was wondering if someone could help me?

The right column goes out of the white content area when you add things to it.
I wanted it so it expands and says in the content area like the main content does.

My CSS code.

body {margin 0px; font-family: Arial, Helvetica, sans-serif; background-color: #eeeeee; color: #333333;}
div#banner {margin-left: 25%; margin-right: 25%; width: 50%; border: 1px solid #cccccc; text-align: center; background-color: #ffffff; margin-top: 25px;}
div#menu {padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 50%; border: 0px solid #cccccc; text-align: center; background-color: #ffffff; margin-top: 0px;}
div#content {padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 50%; border: 1px solid #cccccc; text-align: center; background-color: #ffffff; margin-top: 10px;}
div#main {width: 65%; margin-right: 25%; padding-bottom: 10px;}
div#right {width: 45%; float: right; border-left: 1px solid #cccccc; padding-bottom: 10px;}

My html code.

<html>
<head>
<title>ChrisOliver</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner"><img src="images/logo.png" /> <br> Home  |  About  |  Blog  |  Media  |  Contact </div>
<div id="content">
<div id="right"><h1>right</h1>
<br>
RIGHT
</div>
<div id="main"><h1>Main</h1></div>
</div>
</body>
</html>

Thanks in advance.

ui-ux web-design

Edited 14 Years Ago by vmpchris because: n/a

3 Contributors
3 Replies
92 Views
3 Weeks Discussion Span
Latest Post 14 Years Ago Latest Post by macgurl70

almostbob 866 Retired: passive income ROCKS

14 Years Ago

missing colon in body margin possible throws everything after that missing colon off
less importantzero is dimensionless : throws compliant browsers into 'quirks mode'
elements have shorthand constructors : makes your css file smaller
div#id is redundant only #id is required: there can only be 1 element #idtry

body {margin:0; font-family:Arial, Helvetica, sans-serif; background-color:#eeeeee; color: #333333; }
#banner { margin:25px 25% 0 25%; width:50%; border:1px solid #cccccc; text-align:center; background-color:#ffffff; }
#menu {padding:10px 0; margin:0 25%; width:50%; border:0 solid #cccccc; text-align:center; background-color:#ffffff; }
#content { padding:10px 0; margin: 0 25%; width: 50%; border: 1px solid #cccccc; text-align: center; background-color: #ffffff; margin-top: 10px;}
#main { width: 65%; margin-right: 25%; padding-bottom: 10px;}
#right { width:45%; float:right; border-left:1px solid #cccccc; padding-bottom: 10px;}

html is messed up, elements ending in /> require xhtml declaratives in the head, and require all singleton elements end in /> (<br />)
no html doctype is declared so the browser does not know how to handle the mixed code and displays in quirks mode, (badly)
chose a doctype and validate the code at http://validator.w3.org/
validate your css at http://jigsaw.w3.org/css-validator/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="your,keywords,here" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stdStyle.css" />
</head>
<body>
<p>content<br />content</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="shortcut icon" type="image/x-icon" href="http://www.mysite.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/style.css">
</head>
<body>
<p> content<br>content</p>
</body>
</html>

A lot of other's post are also, "I'm so close what did I miss", that kind of post where you have made an attempt, will always get the most positive replies, instead of the samrtassones that the other kind of Q gets

welcome to DaniWeb

Edited 14 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vmpchris · Answer 1 · 2010-07-27T16:35:47+00:00

Thanks for the help, but for some reason it still doesn't work.
I got a sub domain to show you what it looks like. http://vmpchris.22web.net.
The right column doesn't extend then content.

macgurl70 9 Junior Poster · Answer 2 · 2010-08-23T10:05:18+00:00

Reading the code and looking at the site - it reads where you want the body to have a different background than the area that has the site content. Almost like two lines on either side of the web page.

Here is some rough coding, I admit it is just written out and not tested - but a suggestion to try and see if it will get the results you are looking for.

Thought process behind the CSS and HTML:
1. You want a container for the site content that centers in the web age, and has a white background with the body of the page having a different color.
2. The area that has the white background is one MAIN div containing all the other elements of the page. This gives all the elements a white background without having to state it again. As long as the div is in this container div.
3. By having the divs share a percentage of this area it will help them be consistent.

Remember, you need to keep the content small enough where it will not overlap the actual size of the column. Since the column is given a percentage of the area - it is going to stretch only so far. You may even work on giving the images a percentage (like the header image) to keep them within the column as well.

So, here is the rough code.

CSS

body{
 font-family: Arial, Helvetica, sans-serif;
 background-color: #eeeeee;
 color:#333333;
}

#container{
 background-color: #ffffff;
 width: 70%;
 margin: auto;
 position: relative;
 top: 0px;
}

#banner{
 margin:auto;
 position:absolute;
 top:0px;
}

#menu{
 margin:auto;
}

#menu ul{
 list-style:none;
}

#menu ul li{
 display: inline;
 float:left;
}

#menu ul li a{
 color: #333333;
 display: block;
 border-right: 1px solid #333333;
 border-left: 1px solid #333333;
}

#menu ul li a:hover{
 color:#000000;
}

#main {
 width:70%;
 border-left: 1px solid #cccccc;
 float:left;
}

#sidecolumn{
 width:30%;
 border-left: 1px solid #cccccc;
 float: left;
}

#content {
 width:100%
}

HTML

<body>
<div id="container">
 <img id="banner" src="banner.jpg">
 <div id="menu">
  <ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">BLOG</a></li>
   <li><a href="#">MEDIA</a></li>
   <li><a href="#">FEEDBACK</a></li>
   <li><a href="#">CONTACT</a></li>
  </ul>
 </div>
 <div id="content">
  <div id="main">
  content here
  </div>
  <div id="sidecolumn">
  content here
  </div>
 </div>
</div>
</body>

Hope this helps a bit.

The two columns use the float to be side by side, similar to the menu made from the list.