How to resize the width of div left to another which has float:left;?


Tags: css

Problem :

I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you. Here is my page : image

I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like

width = square size + width i want

Do you know how this it happens and how to properly resize the width of the second div ?

EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.



Solution :

You need to set float for another div too.

We generally do like below:

html

<div class="float-left">
  <p>floated left</p>
</div>

<div class="float-left"><!--- to float next to previous div--->
  <p>floated left</p>
</div>

css

.float-left{
  float: left;
}

As per your comment:

We do clear the float values because the container contents would never been collapsed.


    CSS Howto..

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    How to create an infinite Sign Trajectory using CSS animation?

    How to set my Django form on the center of the page

    How to put border bottom only on last-child of dropdown menu

    how to change the background color of first row in html table and all other rows alternate color

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    efficient way to show an beside each instance

    How I can change the position of 3 div's to be side by side?

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How do I set background-image height using jQuery?

    How to vertically center a div for all browsers?

    How to implement a finished coded html/css page into CMS [closed]

    How to smooth the moving of background image?

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How can I change input type of Yii CJuiAutoComplete?

    How to re-size and crop an image client side while maintaining the aspect ratio

    How to put 2 text input fields in one?

    how come the position static on my element doesnt position relative to the parent div?

    How to display a div as overlay which is hovered by a div which is inside another div?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to change styling of a specific div onhover of another element when divs share an id

    how to make an image “coming” to foreground

    How to fit inner div inside an outer div

    How would you vertically justify text with css/Javascript?

    How to include CSS in laravel 5 running with artisan?

    http://com.google how do they transform everything to RTL

    how to change element css class runtime using javascript

    How to keep button active after press with jQuery

    How to make a hyperlink navigation bar active in CSS or javascript?

    How can I add a red border to this box (an a tag) when the mouse is on (hover) the box?