Css Newbie Question….

[kelvinator44]

Well I just recently started with CSS and I have to do a project for college and cant seem to figure out the problem with my layout. You can have a look at it here (Its the part marked Problem !! :P):
Image

What I want to do is that the part pointed to should act as a container and the parts flowing out of it should ideally not be doing that.
If anyone is willing to help me out heres my complete code till now :
Download Link Link Removed by Mods

Thank you to anyone who helps me out.

[TT_Mark]

Sorry, but we cannot allow people to post links to download files. If you want people to help, please either post the HTML and CSS or link to a live example.

In any case, I’m guessing you have floated the light-grey and dark grey boxes, meaning the container div doesnt expand to ‘contain’ them. In this instance, try adding the CSS property

overflow: hidden

to your container div

[kelvinator44]

Sorry didnt know about that rule. Also I tried the overflow: hidden css style but it just hides the content. Heres the code btw :
index.php

Title


Slogan




























Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.



Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.



Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.









sdfsdfsd

style.css

@charset "utf-8";

/* CSS Document */

body {

font-family: Georgia, serif;

background-color: #828282;

color: #1B0C04;

padding: 0;

margin: 0 auto;

}



#bgGradient {

position: absolute;

background-image: url('images/page_sg.jpg');

background-repeat: repeat-x;

top: 0;

width: 100%;

height: 500px;

}

#header {

margin-top: 0px;

margin-left:auto;

margin-right:auto;

margin-bottom: 0px;

position: relative;

z-index: 0;

width: 874px;

height: 225px;



}

#headerimg {

position: relative;

z-index: -1;

top: 0;

left: 0;

width: 874px;

height: 225px;

background-image: url('images/header.jpg');

background-repeat: no-repeat;

background-position: center center;



}

#headertext {

display: block;

position: absolute;

left: 11px;

top: 51px;

width: 853px;

text-align: center;

font-variant:small-caps;

color: #FFF;

}

#page {

margin-top:-16px;

margin-bottom: 0px;

width: 874px;

margin-left:auto;

margin-right: auto;

position:relative;

}

#mainwrapper {

position: absolute;

margin-left: auto;

margin-right:auto;

height:auto;

width: 100%;

overflow:hidden;

}

#blogSheet {

position:relative;

width: 900px;

clear:both;

height:auto;

background-color: #CCC;

margin-top:10px;

margin-bottom:10px;

margin-left: auto;

margin-right: auto;

padding: 0px;

border: 2px solid #333;



}

#navbar {

position: relative;

height: 42px;

background-image: url(images/nav.png);

}

#navbar ul {

list-style:none;

}

#navbar li {

display:inline;



}

#clear {

clear: both;

height: 0px;

}

#con-side {

position:absolute;

width: 874px;

margin-top: -10px;

height:auto;

margin-left: auto;

margin-right: auto;

background-image: url(images/sheet_v.png);

background-repeat: repeat;





}

#content {

position:relative;

float: left;

width: 674px;

clear:left;





}

#sidebar {

position:relative;

float: right;

width: 200px;

clear:right;



}

.post-body {

position:relative;

font-size: 12px;

color: #000;

background-color: #CCC;

border: 1px dotted #666;

margin: 3px;

padding: 5px;



}

[soap]

put this

underneath

[chrisburton]

@soap, using a div to clear floats is not needed in most cases and is in bad practice as it creates extra markup. You can simply use clear:both; on the next element to clear the float.

[Author]

Posts