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..

    using css modules in react how can I pass a className as a prop to a component

    How to add element to existing css class [closed]

    how to use css align control one row

    How to define CSS styles if Javascript is turned off? [duplicate]

    How to enable HTML content on top of Flash content without the frame rate dropping?

    How to use a CSS animation within a JavaScript plugin?

    How to make other line indent using css?

    Centered CSS pages that are longer than one screen appear 5px~ further to the left than shorter ones - how do I stop this?

    CSS slideshow - How can I add a link to the image?

    How to force division into equal parts using flexbox

    How do I fix Zurb Foundation dropdown issue on mobile devices?

    How to Make Hover Background Fade Smoothly In and Out?

    How the licensed web font is getting rendered?

    How to vertically align the baseline of text to a set point in HTML/CSS

    How to Fade in AFTER the Page has Loaded: Javascript

    How to style HTML compatible tags in XSL definition using extenal CSS?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    Show submenu with CSS without using an unordered list

    Awkward gap between menu items. How to fix?

    How to display code in the same line?

    How to embed css in xml?

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to set background color in AppGyver Supersonic?

    how to know when css3 animation ends

    How to change the CSS from the last child?

    how to make html table first row 'absolute'

    How to apply style rules that are tied to a model in AngularJS?

    How to Determine CSS selector on a DOM object?

    How to reduce div size in CSS using twitter bootstrap?

    How i change the dataTables_filter css class