Question

<div id="wrapper1" style="width:200px;float:left;margin-top:0px">
    <img src="./profilepic.jpg"  width="190px" height="220px"/>
</div>
<div id="wrapper2" style="width:400px;float:left">
    <h2>cool</h2>
</div>
<div id="wrapper3" style="width:300px;float:left">
    <h2>Thanks</h2>
</div>

These are my three wrappers. I want them to float one after the other, but wrapper3 is sometimes getting positioned to the bottom of the wrapper2 , I want wrapper1 to take 200px and following wrapper2 400px and wrapper3 300px total 900px.

How can i make them float one after the other in such a way that they occupy 900px?

Answer 1

Before I answer

Let me just tell you a few things about good practices and the such.

• It is considered bad practice to use inline styling (the style= attribute). Use a stylesheet instead (<style> tags), it allows the grouping of similar elements and reducing of code. Not to mention the separation of content from presentation.
• the width= and height= attributes of the <img> tags do not require (and in fact do not validate with) the px in the end. You should correct to width="190" height="220".

The Answer

You want to wrap all 3 of them in a container which is set to width: 900px; (or min-width: 900px; for that matter).

Here’s an Example

HTML:

<div id=parent>
    <div id=wrapper1>Lorem Ipsum</div>
    <div id=wrapper2>Lorem Ipsum</div>
    <div id=wrapper3>Lorem Ipsum</div>
</div>

CSS:

#parent { /* Applies to parent div */
    min-width: 900px;
}
#parent div { /* Applies to all divs within the parent */
    height: 200px;
    float: left;
}

/* Specific div styling (width and background color) */
#wrapper1 {
    width: 200px;
    background: red;
}
#wrapper2 {
    width: 400px;
    background: green;
}
#wrapper3 {
    width: 300px;
    background: blue;
}