New to CSS and need help with an annoying problem

I am taking a class in CSS and made a design that is 90% CSS to practice. Everything was working fine until I added the content section. I have the sidebar floated left and when I try to float the content div to the right it all gets screwed up. It works a little better if I clear: right it.

I won't post the code here because it is too long.
Here is the HTML page: http://kingdomarcade.com/4-sale/t1/templates/overall.html
Here is the CSS file: http://kingdomarcade.com/4-sale/t1/templates/style.css

The styling for the id of the div I am having problems with starts at '#contentContainer {'

Thanks for any help you can provide.

 

#contentContainer needs to be smaller (maybe 550px) and take out clear: right;
Then in #footer put clear: both;

When you float two containers next to each other and both of them in width are bigger or same as their parent container, the right one jumps down under the left one.

 

I did what you suggested but it still won't display right. No matter what I do I can't get the content on the right of the sidebar. Everything is being held under the sidebar by '#contentSectionTitle' and '#contentSectionContent'

 

The structure of the page should be like this:

<a container for both sidebar and content; big enough>
<side bar container; floated to the left>
...
<end side bar>
<content container floated to the right; immediately after side bar>
...
<end content>
<end container>

Hope this helps

 

Even smaller, set the contentcontainer to 400px for testing, float: left; and put in the footer clear: both;

 

There is another option too, esp since I keep hearing about IE (under7) having some issue with float: right... not sure what that is though...

Do like Hamid said up til the end of the sidebar...then instead of floating the content to the right, you could simply have the right content sitting with position: relative and given margins on three sides whatever you want, with the left margin being a bit bigger than the width+margin of your left sidebar. Because you've explicitly made enough room, the left sidebar won't be able to push everyone else down below.

If the left border (if you had a border) on Content disappears, remove any right margin the float has.

You could also float both of them left as well. With floats, so long as there's room for the next one to fit next, they will stack side-to-side... so sometimes you'll see something on the right side of the page being floated left next to the main content and left sidebar as well.

There's a nice book called HTML Utopia: Designing Without Tables Using CSS which takes a sample website and uses various ways to position the parts, including one float, two floats, absolute and relative positions, using clear correctly, etc. It's very nice to see the various ways you can make a site and they all look the same... which is nice to know if there's one browser having issues with something or someone wants the site to do something weird in the future (there may only be one way to future proof, so it's good to know which manner you could use).

 

Hi! I am new here, I hope I can help out!

Anyway, I saw the site, I made a HTML structure where you can start off, I also placed in on colored backgroudn so that you can see the sections of the webpage.

Its a starter pack, it can be used for you to work around it.

body {
	background-color: #ffffff;
	color: #000000;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 8pt;
	margin: 0;
	padding: 0;
}

#main {
width: 750px;
margin: 0 auto;
padding: 0;
}

#header {
background-color: #d6a719; /*for identification only*/
width: 100%;
margin: 0;
padding: 0;
}

#container {
width: 100%;
margin: 0;
padding: 0;
}

#containerleft {
background-color: #343434; /*for identification only*/
width: 150px;
margin: 0;
padding: 0;
float: left; 
color: #ffffff;
}

#containerright {
background-color: #ffff00; /*for identification only*/
width: 600px;
margin: 0;
padding: 0;
float: right;
}

#footer {
border-top: 1px solid #000000;
clear: both;
width: 100%;
margin: 0;
padding: 0;
}

.margin {
margin: 0;
padding: 3px;
}

.top {
width: 100%;
margin: 0;
padding: 0;
}

.topleft {
float: left;
width: 300px;
margin: 0;
padding: 0;
}

.topright {
float: right;
width: 300px;
background-color: green;
margin: 0;
padding: 0;
}

.middle {
background-color: red;
clear: both;
margin: 0;
padding: 0;
width: 100%;
}

Code (markup):

<div id="main">

	<div id="header">
	
		<div class="margin">
		
			<p><b>THIS IS YOUR HEADER.</b>Quisque id ligula quis pede luctus molestie. Donec dui tellus, luctus at, pulvinar vel, elementum ut, nisi. Aenean iaculis neque sit amet enim. In et dui eget felis iaculis dapibus. Donec nibh neque, pellentesque non, eleifend venenatis, euismod ut, neque. Vestibulum vel velit vel libero rhoncus imperdiet. Sed bibendum.</p>
		
		</div>
	
	</div>

	<div id="container">
	
		<div id="containerleft">
		
			<div class="margin">			
			
				<p><b>THIS IS YOUR SIDEBAR.</b><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque malesuada. Mauris eget ipsum quis arcu tempor feugiat. Fusce eleifend congue eros.</p>

			</div>
				
		</div>
	
		<div id="containerright">
		
			<div class="top">
			
				<div class="topleft">
				
					<div class="margin">
					
						<p><b>THIS IS WHERE YOU PLACED YOUR WELCOME NOTES.</b><br/>Nunc nibh. Nunc id odio. Integer nec risus. Pellentesque interdum, lorem eget varius aliquet, magna nulla aliquam dui, at pulvinar nunc urna id tortor. Sed arcu ante, rutrum cursus, fringilla nec, faucibus et, magna. Praesent gravida convallis augue.</p>
	
					
					</div>
				
				</div>

				<div class="topright">
				
					<div class="margin">
					
						<p><b>THIS IS YOUR FEATURED GAME SECTION.</b><br/>Nunc nibh. Nunc id odio. Integer nec risus. Pellentesque interdum, lorem eget varius aliquet, magna nulla aliquam dui, at pulvinar nunc urna id tortor. Sed arcu ante, rutrum cursus, fringilla nec, faucibus et, magna. Praesent gravida convallis augue.</p>
	
					</div>
				
				</div>
			
			</div>
	
			<div class="middle">
			
				<div class="margin">
				
					<p><b>THIS IS YOUR ACTION SECTION.</b><br/>Mauris lorem. Curabitur vulputate. Quisque elementum nibh ac enim. Phasellus rutrum est eu eros. Aliquam vitae massa pellentesque est egestas faucibus. Suspendisse molestie eros at sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut justo in augue blandit auctor. Nulla est massa, aliquam quis, vehicula vel, interdum eget, dui. Ut eu nulla. Vestibulum mi.</p>
				
				</div>
			
			</div>
	
		</div>
	
	</div>

	<div id="footer">
	
		<div class="margin">
		
			<p></p><b>THIS IS YOUR FOOTER.</b><br/>Quisque quam lorem, laoreet placerat, pharetra non, varius vel, sem. Phasellus egestas metus id nisl. Nam nec nulla. Aenean vitae est. Vivamus vehicula purus vitae massa. Suspendisse pulvinar, purus et bibendum vestibulum, pede quam pharetra enim, sit amet ultricies enim velit fermentum ante. Curabitur velit. Phasellus et nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec tortor. Pellentesque non neque ut ante nonummy commodo. Mauris ac purus sed orci ornare vulputate. In hac habitasse platea dictumst. Sed massa justo, gravida a, nonummy ac, blandit at, purus. Nunc justo leo, eleifend in, adipiscing quis, eleifend eu, arcu. Quisque id sapien. Suspendisse scelerisque faucibus arcu. Suspendisse non risus nec est dictum posuere. Quisque iaculis sapien vel augue.</p>
			
		</div>
	
	</div>

</div>

HTML:

 

^ A few things:

I wouldn't use pt for font size because the browser has to guess what 1/72nd of an inch is, because pt refers to inches on a page. Good for a page to be printed, but not great for a website. em lets people resize nicey, or % if the container is also set in %.

* {
margin: 0;
padding: 0;
}

Then you won't have to add the margin-padding 0's to each div.

Last, why are there margin/top/right/etc divs inside the other divs? Can't the positioning and widths be on the parent divs??

 

Thanks for the help everyone. I just got it to work. The major problem was that the main container on the page was set to text-align: left; I don't know why that caused such a big problem but it did.

Thanks again.

 

It's a manner of preference, yes I can do it with the parent divs but I prefer to do it that way. With many things you can do using CSS, you can make the same effect in different ways, it just so happens I dot it like that.

And also, I stated that it is a starter pack, and you can edit it the way you want to, I just gave an idea about the problem.

 

Nah just wondered... still a good chance that someone know something I don't and has a good reason for doing something a certain way. : )