Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Two Divs Will Not Nest Inside Parent Div

Post a Comment
I have two divs inside of a parent div, but when I inspect the page, the two divs are not in a container, even though I have wrapped the div around the other 2 divs. I want to add

Solution 1:

You didn't insert html start tag after your doctype, it should look a little like this

<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Solution 2:

+1 on Johnny's answer, and also markup is slightly out of whack:

You style have style rules added to .hr_1 element, while it appears you would want to have them added to #sell_section - that's the id of the wrapping div.


Solution 3:

I'm having a little trouble understanding exactly what you are after. The way I understand it you might want to do something like add a border or background-color to your #sell_section DIV. And at different sizes the styles are not being applied like you would like them to? If so, then the culprit is because you are floating your child/nested DIVs. Floating can be a bit tricky to understand at first. It is definitely one of those concepts that takes a bit of practice and knowledge to understand fully.

Here's the short of what happens when you float something:

When an element is floated it is taken out of the normal flow of the document.

What does that mean? If you have this structure:

<div class="outer">
     <div class="inner">inner</div>
     <div class="inner">inner</div>
</div>

and the following CSS:

.outer {
     background-color: red;
}
.inner {
     float: left;
     width: 50%;
}

the background color of .outer would not be visible because the child DIVs are floated and do not take up any space within their parent DIV. Although other elements within the parent DIV (floated or not) with them.

The solution? The most popular is know as clearfix. Apply that to the element that contains floated elements and it will behave as if those elements were not floated and took up space.


Solution 4:

I found the answer to my problem! I didn't realize that floated elements do not take up space in a div. So to correct it, I added overflow:auto to my containers. This solved the problem completely. Now I can add borders and backgrounds to my divs without wondering why they aren't stretching the length of the whole container.


Post a Comment for "Two Divs Will Not Nest Inside Parent Div"