CSS Problem

ShooterSF

Hi guys.
I'm working on a template for two sites I'm designing but website's are not really my thing. I took the time to learn about css as I'm a bit of a perfectionist when it does come to learning new skills.

I came across the usual 2 column problem with the side bar not stretching enough. And used the extra padding and negative margin solution putting my sidebar and content section into the same "main-container" and hrrah prblem solved until....
I started putting text into my sub menu and even though it wrapped properly it pushed the content down in my main content section.

Anyone any ideas? I'll post any of the script that might help. I realize theres probably more dedicated forums for this problem but I post on the boards so it's easier to ask here.

Adam

Is the sub menu a third div or is that just you referring to the side bar in two different ways? I suggest you post your code tbh.

stevire

+ 1 on posting the code...

In your webpage do you have one container inside the other or outside?

Are you using floats or absolute/relative positioning??

ShooterSF

Sorry I confused it there. It's one and the same (I called it a sub menu at the time) Here's the code: (Ive highlighted the problem area. The Main-container holds sub-menu and content. Text in the sub-menu is pushing down that in the content) Again thanks for any help....

html, body{
margin: 0;
padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}

.hidden {
	display: none;
}

#page-container {
	width: 760px;
	margin: auto;
[B]}
#main-container {
	width:px;
	height:auto;
	overflow:hidden;[/B]
}

#header {
	height: 175px;
		background: #32CD32
	            url(../images/headers/webheader.jpg);

}

#main-menu {
	height: 80px;
	background: #0000FF
			url(../images/background/mainmenubluesized.gif);
	border-bottom: 3px solid #000000;
	border-top: 3px solid #000000;
}[B]

#main-container .sub-menu {
	float: left;
	width:145px;
	line-height: 18px;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
	background: darkgreen;
	border-right: 3px solid #000000;
}

#main-container .sub-menu .padding{
	padding: 25px;
}

#main-container .content {
	float: right;
	width: 615px;
	line-height: 18px;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
}

#main-container .content .padding {
	padding: 25px;
}[/B]

#footer {
	border-top: 1px solid #efefef;
	padding: 13px 25px;
	line-height: 18px;
	clear: both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;

}

#footer a {
	color: #c9c9c9;
	text-decoration: none;
}

#footer a:hover {
	color: #db6d16;
}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
}

h1 {
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 37px;
	padding-right: 20px;
}

h2 {
	line-height: 18px;
}

#main-container h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#main-container p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}
#beta-exempt {
	color: darkgreen;
	padding: 0;
	margin: 0;
	font-size: 1.3em;
}
#alpha {
	padding: 0;
	margin: 0;
	color: red;
	font-size: 1.3em;
}
	

ShooterSF

stevire wrote: »

+ 1 on posting the code...

In your webpage do you have one container inside the other or outside?

Are you using floats or absolute/relative positioning??

There both inside one. I don't know whether it's relative or absolute...

Adam

If I understand you correctly, I think you want #main-container .content { to float left, not right...

ShooterSF

Actually mirror that made it worse
As it is I have the 2 of them inside a 760px container. I floated the sub-mnu left and gave it a width of 145px and floated the content right and gave it a width of 615px.
Technically it should be the same leaving the main contents float out completely as it's just filling the rest of the main-container anyway.

Still can figure why the main content's text is starting in the right place but below the sub-menu's content. e.g

Sub menu  |                                   |
txt is here.|                                    |
and is ok   |                                   |
               | For some reason main     |
               | starts here.                  |

That example didn't work as I typed it out but hopefully you see what I mean.

louie

as you are working with fix width for the main container you can try float:left

<div id='main_container' style='width:760px;'>
  <div id='left' style='width:150px; float-left;'>some text</div>
  <div id='content' style='width:610px; float:left;'>content text here</div>
</div>

Adam

Shooter, if you have a surrounding div with no properties, float left on the two inner divs would work. If it's not working, you need to look at the rest of your css.

Here's a simple example:

[html]
<html>
<head>
<title>Test</title>
<style>
html, body {
margin: 0;
padding: 0;
}

#wrapper {
width: 760px;
margin: auto;
}

#left-menu {
float: left;
width: 145px;
background: red;
}

#body {
float: left;
width: 615px;
background: green;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="left-menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>

<div id="body">

Here's the body text.

</div>

</div>

</body>
</html>
[/html]

EDIT: You will need to use the text-align: center hack for ie to render the margin: auto property correctly.

stevire

Have a look into positions in CSS. A lot can be solved through these...

Take the following into account:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Any elements contained within div-1 will now be positioned relative to div-1.
Div1-a is absolute so we have a fixed position to it, but it is contained within div-1. So this will appear in the top right, div-1b is similar except will be positioned absolute to the top left and relative to div-1.

From a quick glance of your code, main-container should be relative. Most others within will be absolute, unless you have another div inside a div within main-container...

Hope this makes sense??

ShooterSF

Thanks for the help guys. Got it sorted.
As usual it took stepping away from the pc to have that eureka moment.
As I had the main container's width at 760 px and the two columns set at 145 and 615 I decided maybe the padding of 25px around them so the text wasn't touching was the problem!
Sure enough reducing the width of my main content solved the problem. What I think was happening was ,with the padding, the main content couldn't fit to right when there was text in the sub menu and was therefore dropping down to fit. I'm still not sure exactly why it fits when there's no text beside it in the sub menu but I'm just glad it's ok.

Thanks for all the help guys!