CODEWITHSUNDEEP
htmlcss
Defain
Defain

Reputation: 1325

How to make width: auto work with float?

I noticed there was several guestions about this type of problem with only 2 divs inside a wrapper and without any floats but I was not able to find anything with floats and several divs.

So here is guestion: How can I make the container div to fill the rest of the width automaticly? I need to keep the floats and any display: inline-block etc solutions do not fix that.

Please feel free to copy the code to your notepad so you can see it live:

<html>
<head>
<style>
#wrapper
{
    width: 100%;
    height: 100%;
    border: 1px black solid;
}

.block1 {
       width: auto;
       float:left;
       min-height: 500px;
       display: inline-block;
       background-color: green;
}
.block2 {
       display: inline-block;
       float:left;
       min-height: 500px;
       width: 200px;
       background-color: red;
    }
.block3 {
       display: inline-block;
       float:left;
       height: 30px;
       width: 10%;
       background-color: yellow;
    }
.block4 {
       display: inline-block;
       float:left;
       height: 30px;
       width: 90%;
       background-color: purple;
    }
</style>
</head>
<body>

<div id="wrapper">
    <div class="block4">topmenu</div>
    <div class="block3">profilebar</div>
    <div class="block2">leftmenu</div>
    <div class="block1">content</div>
</div>

</body>
</html>

Here is a JSFiddle example

Upvotes: 0

Views: 162

Answers (2)

nesk
nesk

Reputation: 628

A better solution than floats is using absolute and relative positions, just like this:

<div id="header">
    <div id="topmenu">topmenu</div>
    <div id="profilebar">profilebar</div>
</div>
<div id="content-container">
    <div id="leftmenu">leftmenu</div>
    <div id="content">content</div>
</div>

 

#header {
    position: relative;
    height: 30px;
}

#topmenu {
    position: absolute;
    width: 90%;
    height: 100%;
    background-color: purple;
}

#profilebar {
    position: absolute;
    left: 90%;
    right: 0;
    height: 100%;
    background-color: yellow;
}

#content-container {
    position: relative;
}

#leftmenu {
    position: absolute;
    width: 200px;
    min-height: 500px;
    background-color: red;
}

#content {
    position: absolute;
    left: 200px;
    right: 0;
    min-height: 500px;
    background-color: green;
}

Here's an example on jsFiddle.

Upvotes: 1

musefan
musefan

Reputation: 48415

Remove the float and display from .block1 and set a margin-left and margin-top like so:

.block1 {
    width: auto;
    min-height: 500px;
    margin-top:30px;
    margin-left:200px;
    background-color: green;
}

Here is a working example

Upvotes: 2

Related Questions