how to show one element under the other one?


Tags: html,css

Problem :

I have a problem with my CSS in my html file.

I have two div's:

<div class="one">
    ....
</div>
<br>
<div class="two">
    ....
</div>

with the following css:

.one 
{
    position: relative;
    float: left;
}
.two 
{
    position: relative;
    float: left;
}

the problem: the first div is very big and the second should be under the first but it is not, its right from the first one.

how to fix this, so that the second div is under the first one starting at the left site of the page?



Solution :

A nice explanation for Why clear?

Add clear: left for .two

.two {
clear: left
}

Check this JSFiddle


    CSS Howto..

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    How do I resize an image in IE 8

    How do I achieve this particular hover effect?

    How can I configure this gulpfile the right way to have a nice workflow

    How to prevent css keyframe animation to run on page load?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    How to create new line with css or javascript?

    How to add scrollable tooltip HTML?

    How to make this in html and css?

    How can I float right two span tags on different lines?

    how to make css hover just only in a bullet area

    How to get names of css classes of an element

    How can I get jQuery or Javascript to change css based on the current url?

    how to use 'selector gadget' to scrape data into R?

    How to put four images 2x2 on other image as background, CSS?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How can i overlap inline divs?

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    How to create generic CSS class with input parameter

    With CSS, how do you unhighlight a link after clicking a different link?

    How can I change CSS style definition to make border on specific div

    How do I move this scrolling bar closer to the post area?

    How to add a color overlay to a background image?

    Bootstrap select dropdown showing selected option above the control

    How to Extract one images from bunch of image(Image Pack)?

    How to redirect using css? [duplicate]

    CSS 3D containers like shown in post

    How to make application browser compatible

    How to put text and image in a same line?