PDA

View Full Version : 2 column design (in one larger single column design)

Yono
10-16-2005, 07:59 PM
Ok, I know I was asking a different question a while back, but I have since changed slightly the way I want my page to show up. I was hoping to have one larger single column with banner at the top, content in the middle then a footer at the bottom, Kind of like this:

----
Banner

Content (2 columns: Menu/Text)

Footer
----

I got it to show up right in both browsers up until I decided to add the div in the main column. Now, instead of being next to one another (as I thought it was going to do) it threw my text down below the menu.

I was wondering if anyone knew what the problem was?

----
Current HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:: DigiShroom ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="HDigishroom.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="../images/favicon.ico">
</head>

<body>
<div id="Container">
<div id="Banner"></div>
<div id="Seperator"></div>
<div id="Content">
<div id="LeftNav">
<div class="NavItem">
<ul class="navUL">
<li class="navLI"><a class="NavLink" href="#">Link 1</a></li>
<li class="navLI"><a class="NavLink" href="#">Link 2</a></li>
<li class="navLI"><a class="NavLink" href="#">Link 3</a></li>
<li class="navLI"><a class="NavLink" href="#">Link 4</a></li>
<li class="navLI"><a class="NavLink" href="#">Link 5</a></li>
</ul>
</div>
<div class="NavItem">
<ul class="navUL">
<li class="navLI"><a href="#"><img src="../images/affiliates/wankaz.gif" border="0" /></a></li>
<li class="navLI"><a href="#"><img src="../images/affiliates/wankaz.gif" border="0" /></a></li>
<li class="navLI"><a href="#"><img src="../images/affiliates/wankaz.gif" border="0" /></a></li>
<li class="navLI"><a href="#"><img src="../images/affiliates/wankaz.gif" border="0" /></a></li>
<li class="navLI"><a href="#"><img src="../images/affiliates/wankaz.gif" border="0" /></a></li>
</ul>
</div>
</div>
<div id="RightStuff">
<p> I randomly had 5 lorum ipsum paragraphs here</p>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>


----

Current CSS

/*
Author: Sean Kennedy
Date: 10-8-2005
*/
body,html {
background-image: url(../images/BG.gif);
padding: 0px;
margin: 0px;
}

/* HTML Choice Elements */
#Container {
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
min-height: 100%;
height: auto;
width: 740px;
background-color: #FFFFFF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}

/* IE 100% Hack */
* #Container {height: 100%}
/* End IE Hack */

#Banner {
background-image: url(../images/banner.gif);
background-repeat: no-repeat;
height: 275px;
width: 740px;
margin: 0px;
padding: 0px;
position: relative;
}
#Seperator {
background-color: #000000;
margin: 0px;
padding: 0px;
height: 20px;
width: 100%;
}
#Content {
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
#LeftNav {
height: auto;
width: 20%;
text-align: center;
margin: 0px;
padding: 0px;
}
.NavItem {
height: auto;
width: 100%;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
position: relative;
background-color: #000000;
}
.navUL {
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.navLI {
margin: 0px;
padding: 0px;
}
#RightStuff {
height: auto;
width: 80%;
margin: 0px;
padding: 0px;
}
#Footer {
height: 20px;
width: 100%;
padding: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #000000;
clear: both;
}


----
I could have sworn that if you have two divs (left menu and rightstuff) inside one other one (content) set to relative that they would just go next to one another.

Anyhow, I'm still learning CSS so if there is any other discrepencies, please let me know.
syrupcore
10-16-2005, 08:59 PM
try:

#LeftNav {
float:left;
height: auto;
width: 20%;
text-align: center;
margin: 0px;
padding: 0px;
}

you might have to shimmy some widths.

Will
Yono
10-16-2005, 09:04 PM
Thing is, I don't want it to wrap around it, I want two defined columns, one for the menu (and any other menu boxes I may add) and one for the text, on the left and right consecutively.

That DID work though, for having it wrap. (As I tried that before, I just want them both to be seperate, as in the text staying just on the right)
_Aerospace_Eng_
10-16-2005, 09:09 PM
Can you draw a picture of what you want? It doesn't have to be a great one just one to give us the general idea. In the mean time are you looking for a layout similar to this one (http://bonrouge.com/2c-hf-fluid.php)?
Yono
10-16-2005, 09:31 PM
Yeah, kind of like that layout, but fixed width and centered (with a banner, of course).

As for what I want it to look like, here: http://home.comcast.net/~skitzyyono/Krap/SiteLayout.gif

With the text and menu sections being in their own Divs. Though, I may be able to set the menu to float, like will suggested and set a bigger margin on the #rightstuff, however, I'm not sure.

I need to head off to work right now, I'll check back in when I get home later tonight, thanks again.

Sean
_Aerospace_Eng_
10-16-2005, 09:33 PM
Then this may be what you want. http://bonrouge.com/2c-hf-fixed.php
Yono
10-17-2005, 04:09 AM
All fixed, thank you very much.

Check it out every now and again if you like: http://www.digishroom.com