CODEWITHSUNDEEP
csshtmlword-wrap
Balfear
Balfear

Reputation: 51

Fit div (width) around floating divs

I have now searched for hours and couldn't find a workable solution for my problem, so I have you can give me some advice.

What I want is a div that wraps around some floating divs inside. Wrapping the height is no problem to me, but the width doesn't wrap right if the browser is resized to a width, where the floating elements jump down.

Here some example code:

HTML:

<div class="wrapper">

    <div class="block1">
    </div>

    <div class="block2">
    </div>
</div>

CSS:

body {
    border: solid 1px green;
}

.wrapper {
    border: solid 1px red;
    display: table;
}

div {
    display: block; 
}

.block1 {
    float: left;
    width: 390px;
    height: 390px;
    background-color: blue;
}

.block2 {
    float: left;
     width: 390px;
    height: 390px;
    background-color: yellow;
}

So basically I want the wrapping div to always have the width that the divs inside need. By resizing the window and letting the right div jump under the left the wrapping div should now have the width of 390px for this example.

I need this solution for a responsive website I'm trying to make and I need it as soon as possible.

A pure CSS solution would be prefered, but JS or jquery would also do.

Upvotes: 5

Views: 920

Answers (7)

keithwyland
keithwyland

Reputation: 2998

You can use a CSS media query on the wrapper div. Like so:

@media (max-width: 783px) {
 .wrapper {
    max-width: 390px;
  }
}

See this codepen for an example:

Upvotes: 1

Nandhakumar
Nandhakumar

Reputation: 376

<div class="wrapper">

    <div style="display:table-row">

        <div class="block1">
        </div>

        <div class="block2">
        </div>

    </div>

</div>



.wrapper {

    border: solid 1px red;
    display: table;

}

.block1 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: blue;

}

.block2 {

    display:table-cell;
    width: 390px;
    height: 390px;
    background-color: yellow;

}

Upvotes: 0

Balfear
Balfear

Reputation: 51

Thx for all your help everyone,

I ended up doing it with some JavaScript by reading the window size and setting the wrapper width manually.

thanks!

Upvotes: 0

heriawan
heriawan

Reputation: 146

how about modify this class

.wrapper {
border: solid 1px red;
display:table;
**white-space:nowrap;**
}

or maybe if you would like to make the left div fix, so if window size change only the right div will be resize

make this for the right div:

display: block;
position: absolute;
top:0; 
right:0;
margin-left: *your_fixed_left* px;

Upvotes: 0

Scott Evernden
Scott Evernden

Reputation: 39926

add

    white-space: nowrap;

to the .wrapper

Upvotes: 0

David Lloyd Brookes
David Lloyd Brookes

Reputation: 160

Javascript is highly likely the only way...

using $(window).resize

and: Javascript Browser Width

once you know the width of the browser you can divide the available space and specify the width of the wrapper div, thus wrapping your floating divs.

Upvotes: 0

LDJ
LDJ

Reputation: 7304

Cant you use width or min-width to keep the div 780px on "desktop" and then on lower screen widths that would cause the blocks to wrap, set the width of the parent to 390px. Wrap these in the appropriate media queries and bobs your uncle.....

HTH

Upvotes: 0

Related Questions