CODEWITHSUNDEEP
htmlcss
user765368
user765368

Reputation: 20346

position absolute div broken

I have a div like this:

<div class="main">
    <div class="container_1">A</div>
    <div class="container_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.></div>    
</div>

And my css is like this:

.main div
{
    float:left;
}

.main .container_2
{
    width:500px;
}

.main .container_1
{
    width:40px;
}

.main
{
    position:absolute;      
    padding:5px;
    color:#fff;
    background-color:#365;
}

The problem I have is, when I don't use position:absolute; on my main div, everything is broken (you can view the example on jsfiddle. Everything works fine only if I use position absolute on the main div, but I don't wanna use position absolute because I want the main div to preseve its space in the document. Any help please?

Thank you

Upvotes: 0

Views: 673

Answers (8)

Benjamin Robinson
Benjamin Robinson

Reputation: 368

You can use: 

.main {
  overflow: hidden;
}

-- Or --

The clearfix method (if you don't want to use "overflow: hidden" for other reasons): http://css-tricks.com/snippets/css/clear-fix/

This one works, usually: 

.group:after {
  content: "";
  display: table;
  clear: both;
}

Just add the class "group" to the "main" div, or replace "group" with "main." Here's the clearfix method applied and working: http://jsfiddle.net/ksyFG/

To be clear, these are two separate solutions: "overflow: hidden" or clearfix.

Upvotes: 0

PSL
PSL

Reputation: 123739

You can either float the main div or give it display:inline-block to take the complete dimension of its floating children, unless you want to add <div style="clear:both;float:none;"></div> in the markup just before the closing of container div and after the last floating element.

.main
{

    display:inline-block;
    padding:5px;
    color:#fff;
    background-color:#365;
}

Fiddle

All About Floats

Upvotes: 1

cschneider27
cschneider27

Reputation: 309

I try to avoid absolute positioning at all costs. If I find myself absolutely positioning something just to get it to display the "correct" way I usually look elsewhere for issues.

For me, absolute positioning is saved for when I want to make elements sticky, like a top nav, or bottom footer, or something along those lines.

Like most have said here. Float the main div. Should help alleviate some headaches.

I cleaned some stuff up here, and updated: http://jsfiddle.net/s58TF/

.main_2{
padding:5px;
color:#fff;
background-color:#365;
float:left;

}

Upvotes: 0

DrCord
DrCord

Reputation: 3955

What is happening is that your container is not floated and so due to the weirdness of floats does not fully contain the interior items that are floating.

adding:

.main{
    float: left;
}

fixes the problem.

Upvotes: 0

omma2289
omma2289

Reputation: 54619

You need to use clear whenever you have floating elements to make sure the parent wraps all their content, I like to use CSS :after for this

.main:after{
    content: '';
    display: block;
    clear: both;
}

Upvotes: 2

TheTechGuy
TheTechGuy

Reputation: 17354

Use 

overflow:auto

instead of

position:absolute;

on .main

jsfiddle

Upvotes: 0

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

As the children of main are floating you have to add overflow: hidden in the main or add another div as:

    <div style="clear: both;float:none;"></div>

Upvotes: 0

Godwin
Godwin

Reputation: 9907

You can make the .main div have overflow: auto to take on the height of its floating child.

.main
{
    overflow: auto;      
    padding:5px;
    color:#fff;
    background-color:#365;
}

Upvotes: 0

Related Questions