CODEWITHSUNDEEP
htmlcssnested
user2317093
user2317093

Reputation: 766

Why do my divs sit next to each other when I insert another div?

Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.

I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage

For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.

Here is my CSS:

#maincontent {
    width: 960px; 
    margin-left: auto; margin-right:auto;
}

body {

    background-color: lightgrey;

}
h1 {
    color: orange; font-family: ubuntu; padding-top: 10px;
}

header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;


}

#headercontainer {
width:  960px; height:  100px;
margin-left:  auto; margin-right: auto;
background-color: olive;
}

#navbar {
    width:  960px; height:  20px; margin-left: auto; margin-right: auto; background-color: red; 
}

#logo {
    background-color: lightgrey; height: 100px; width: 100px;  
}

nav {
    width: 100%; height:  20px; background-color: #f0f0f0; float:left; 
}



article {
    width: 960px; height: 500px; background-color: orange; 
}

.Featurebox {
    background-color: darkgrey;  
    width: 310px;
    height: 200px;
    float: left;
}

.Boximage {
    background-color:blue; width:285px; height: 130px;
    float:left;
}


footer {
    width:  100%; height:  80; background-color: 000000; clear: left;
}


.center {
  margin-left: auto;
  margin-right: auto;
}

Here is my HTML:

<html>

<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>


<header>
    <div id="headercontainer">
        <div id="logo">logo</div>       
    </div>
    <nav>
        <div id="navbar">navigation bar</div>
    </nav>
</header>


<div id="maincontent">

<article>article here
</article>

    <div class="Featurebox">
    <div class="Boximage"</div>

    </div>

    <div class="Featurebox">
    <div class="Boximage"</div>

    </div>

    <div class="Featurebox">
    <div class="Boximage"</div>

    </div>
    </div>

    <footer>

    </footer>


</body>
</html>

Upvotes: 0

Views: 104

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

You're missing the > after the opening part of the .Boximage tag:

<div class="Boximage"</div>

It seems to work if you correct that.

http://jsfiddle.net/CLUTP/1/

Upvotes: 1

Michael
Michael

Reputation: 7092

<div class="Featurebox">
    <div class="Boximage"</div>

I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:

<div class="Featurebox">
    <div class="Boximage"></div>

For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.

<div class="Featurebox">
    <div class="Boximage"><p>Box 1</p></div>

It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage

Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.

Upvotes: 2

Related Questions