Float CSS Problem

can anyone tell me how to solve this problem? Picture attached here.


Div1 is floated left;


Div2 was isn't floated left so it goes like this;when was floated it goes entirely below Div1(due to width problem).


Also please tell me how can we make container of the size of its floated contents?




Thankyou

 

you can visit at w3school. there are many CSS example.

 

Give padding-left 15px;
and you don't need to float it to the right ok!

 

Also, read up on clearing floats. Will save some future headaches.

 

i can solve it if you provide me the uel

 

Let suppose code in this use 980px width and height 700px of main page and give name of main div and inside it use 2 class div.
Suppose HTML code
<div id="mainbox">
<div class="left"> Left Side </div>
<div class="right"> Right Side <br /> </div>
</div>
CSS code
#mainbox {
background-color: #FC9;
height: 700px;
width: 980px;
}


.left {
background-color:#0FC;
height: 300px;
width: 200px;
float:left;
}


.right {
background-color:#369;
height: 700px;
width: 780px;
float:right;
}

 

Hello man, if you use firefox browser, you need addons firebug to solve all the problem.

 

Not entirely sure what you are even asking -- are you trying to make it so DIV2 doesn't auto-indent and/or stretch underneath the float? If so you just set overflow:hidden on it for 'modern' browsers, and a haslayout trigger (like zoom:1 for legacy versions of IE.

Though if you're doing a fluid layout, it's often more stable to do the 'extra DIV and negative margin float' trick to make sure it always behaves without float drop.

Either way, fixing the width is NOT the answer, since you shouldn't have an inaccessible train wreck of a website in the first place. The too big for a netbook and crappy little stripe on desktop method of site design being some of the biggest asshattery this side of declaring all your fonts in pixels and using insufficient color contrasts -- the trifecta of failure in the age of responsive layout.