Box model error?

[eip56]

Hello everyone!

Well I’m working on a basic portfolio site/ web design site. I ran into a problem that I cant wrap my head around. For the content area I have created 3 simple div’s of different colors. The third box being a content area. I added a welcome statement along with a short paragraph <p>. Well I decided I wanted to move the word content to the right of that third box so that I can put a nice picture on the left side. Well I made a div class called contentindex { and floated it to the right and a width of 400px; . When I do this it kicks the content out and puts it underneath the box model I made. The box model shrinks as if there was no content inside.

Here is the Code please let me know if you have any ideas. Thank you in advance for any help:

XHTML Doc

Code:

• Home
• About
• Portfolio
• Services
• Contact

Welcome

Hello and welcome to Fallout Designes. Home to the most unique and inspiring designs. We here at fallout Designs believe in the “awe” factor. We want to impress you and you clients by providing you a mind blowing experience with web design and fast hosting. Whether you need a re-vamp to your website or a website from scratch, we are here for your needs.

---

CSS Doc:

Code:

body {
background: #000000 url(../images/back_splash1.png) no-repeat 40% 0%;
}

#container1 {
margin: auto;
width: 700px;
}

#logo {
float: left;
margin-top: 100px;
}

/* NAVIGATION */

.nav {
float: right;
margin-top: 115px;
}

.nav ul {
margin-right: ;
}

.nav li {
display: inline;
padding-left: 5px;
}

.nav li a {
color: #fff;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
text-decoration: none;
}

.nav li a:hover {
color: #143ea9;
text-decoration: underline;
}

/* End Navigation and logo area — Start Content */

/* Start Content Boxes */

.box1 {
background: #143ea9;
clear: both;
margin-top: 110px;
padding: 3px;
}

.box2 {
background: #418c1b;
padding: 3px;
}

.box3 {
background: #000000 url(../images/content_fill.png);
padding: 3px;
}

/* End Boxes */

.contentindex {
border-left: #CCC 1px solid;
float: right;
width: 400px;

}

h1 {
color: #ffffff;
font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
margin: 0px;
}

p {
color: #ffffff;
font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-size: 13px;
}

Oh btw I added a <hr style="clear: both" /> tag at the end and it seems to carry the box and correct the error but it is just a work around until I can find the solution to the above listed problem. I would like to remove it.

[TheDoc]

If you could post a link that would be great! Makes things a million times easier for us!

[eip56]

Was just working on it locally but i have loaded it to the domain

This is without the error and i added the hr for a work around
http://www.falloutdesigns.com

This is without the <hr> and you can see without what it does

http://www.falloutdesigns.com/error

thanks

[eip56]

excellent thank you for the help everyone!

[Author]

Posts