CODEWITHSUNDEEP
htmlcsscss-floatwidth
Stephan Kulla
Stephan Kulla

Reputation: 5067

Consider floated elements for the width of blocks

Imagine the following markup (link to jsFiddle):

<div style="float: right; width: 200px; height: 200px; background-color: red; margin: 0 20px 0 30px;">
     Block 1
</div>

<div style="height: 100px; background-color: green;">Block 2</div>

Because the first block is floated, the second block takes the whole available space for the width as if block 1 is not defined. What do I need to set for the second block so that its width is maximal the space to block 1 minus the left margin of block 1?

The final result should be something like this, where I used display: flex in the second block. But in my case I cannot use this solution, because the second block contains a paragraph which looks ugly with display: flex.

Note: In my case (programming a template for a wiki) I just can change the CSS of the second block!

Upvotes: 1

Views: 33

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

Instead of using flex, simply add overflow: auto to Block 2:

<div style="height: 100px; background-color: green; overflow: auto;">
    Block 2
</div>

See demo at: http://jsfiddle.net/PXuWB/

The advantage of this approach is that you don't have to specify an exact length of a margin, which is more useful in a responsive design.

By setting overflow: auto, you create a block-formatting context which prevents the content from interacting with any adjacent floated elements.

Reference: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Upvotes: 1

j08691
j08691

Reputation: 207901

Give block two a right margin equal to the width and margin of block one:

<div style="height: 100px; background-color: green;margin-right:230px;">Block 2</div>

jsFiddle example

(side note: avoid using inline CSS whenever possible)

Upvotes: 2

Related Questions