CODEWITHSUNDEEP
htmlcss
Alan Moore
Alan Moore

Reputation: 6575

How do I get a div to show up on the next line without using clear:both?

I am working on a small piece of a complex web page where there are divs that I don't directly control being placed on the right side of the page. Therefore, when I use a clear:both (as suggested here) to force my div to the next line, it will jump down the page past the content on the right side -- which I don't want.

here is a fiddle which is a stripped down version of my code -- hopefully containing the relevant portions:

https://jsfiddle.net/yyt0tkLr/

I want the 'text underneath' to show up on the next line. I know clear:both would do it but as I said, it interacts poorly with the rest of the page.

My whole widget needs to be wrapped in divs otherwise I could put the text outside of the div wrapper and it would show. The divs I have in there supply precise padding which I require -- most of the pieces need padding so I can't really just remove divs, although I could add some divs as long as they don't mess up my other formatting (wrap the long text, buttons stacked and width of text, etc.).

I do need this to work on all browsers and should display correctly even without javascript enabled.

Here is the full code:

CSS:

.images {
    float:left;
    border:1px solid black;
    height: 100px;
    padding:6px;
}
.underneath {
    display: inline-block;
    float: left;
    width: 100%;
}
.rightcol {
    float: right;
    border:1px solid black;
    height: 200px;
}
.row {
    border:1px solid black;
    padding:5px;
}
.text {
    padding:10px;
}
.buttonstack {
    border:1px solid black;
    display: inline-block;
}
.button {
    border:1px solid red;
}
.wrapper {
}

HTML

<div class='row'>
    <div class='rightcol'>stuff on right</div>
    <div>
        <div class='images'>images</div>
        <div> <span class='text'> long text long text long text long text long text  long text long text long text long text long text
    </span>

            <div class='buttonstack'>
                <div class='button'>button</div>
                <div class='button'>button2</div>
            </div>
        </div>
    </div>
    <div class='underneath'>text underneath</div>
</div>

Note: I've updated my fiddle to demonstrate the div on the right side, this more closely represents my page.

Upvotes: 0

Views: 67

Answers (4)

Alan Moore
Alan Moore

Reputation: 6575

Looks like I found my answer, clear: left added to the .underneath does the trick, like so:

.underneath {
    clear: left;
}

Upvotes: 0

mtsears
mtsears

Reputation: 21

Try adding this to your .row

float:left;
height:100%;

So it would be 

.row {
border:1px solid black;
padding:5px;
float:left;
height:100%;

}

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

You could use these styles:

.underneath {
  float: left;
  width: 100%;
}

Fiddle

Upvotes: 1

Lieutenant Dan
Lieutenant Dan

Reputation: 8294

.divinquestion { 
   // your sweet styles
   display:inline-block; // add this
}

Upvotes: 0

Related Questions