CODEWITHSUNDEEP
htmlcss
Karthik G
Karthik G

Reputation: 1262

Alignment of divs in html

I am new to CSS. I am trying to align my divs. The first div has two inner divs with one on left and another on right like two tds of the same tr and then the subsequent three divs are all one below another. i.e. 4 below 3 below 2 below 1.

Fifth sixth seventh divs are to be display below first / second / third divs and are mutually exclusive, i can manage that in jquery. But I tried my best but could not get them to align properly.

I used block for all divs excluding the two inner divs in the first div which i used inline-block. Please find below the HTML markup and the image showing what i get with the styles.

Image:

enter image description here

HTML Markup:

<div>
    <div style="float: left; display: inline;">
        First Left
    </div>
    <div style="float: right; display: inline;">
        First Right
    </div>
</div>
<div>
    <div>
        Second 
    </div>
</div>
<div>
    <div>
        Third
    </div>
</div>
<div>
    <div>
        Forth
    </div>
</div>
<div>
    <div>
        Fifth - Additional section either with First / Second / Third
    </div>
</div>
<div>
    <div>
        Sixth - Additional section either with First / Second / Third
    </div>
</div>
<div>
    <div>
        Sevent - Additional section either with First / Second / Third
    </div>
</div>

Upvotes: 1

Views: 120

Answers (5)

Sachink
Sachink

Reputation: 1530

First you need to understand float behavior with parent

See the first left and first right both div having float. So that Parent is consider nothing inside of div, parent will independent.

For Fixed

1) user clear:both; for second div

OR

2) remove the float:left of First Left

<div>
    <div style=" display: inline;">
        First Left
    </div>
    <div style="float: right; display: inline;">
        First Right
    </div>
</div>
<div>
    <div>
        Second 
    </div>
</div>
<div>
    <div>
        Third
    </div>
</div>
<div>
    <div>
        Forth
    </div>
</div>
<div>
    <div>
        Fifth - Additional section either with First / Second / Third
    </div>
</div>
<div>
    <div>
        Sixth - Additional section either with First / Second / Third
    </div>
</div>
<div>
    <div>
        Sevent - Additional section either with First / Second / Third
    </div>
</div>

Fiddle : http://jsfiddle.net/sachinkk/qa255pw7/

Upvotes: 1

Innam Hunzai
Innam Hunzai

Reputation: 462

You have to clear the float using style="clear:both" whenever your new row begins add this line before it <div style="clear:both"></div> you will get the desire output

Upvotes: 1

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

If I understood your question then you want to align your first and second div side by side in first row and then after third fourth and fifth div will be there. if yes then following fiddle is ans for your question.

check fiddle. https://jsfiddle.net/v8mcowqq/

HTML

<div>
    <div class="first">First Left</div>
    <div class="second">First Right</div>
</div>
<div>
    <div>Second</div>
</div>
<div>
    <div>Third</div>
</div>
<div>
    <div>Forth</div>
</div>
<div>
    <div>Fifth - Additional section either with First / Second / Third</div>
</div>
<div>
    <div>Sixth - Additional section either with First / Second / Third</div>
</div>
<div>
    <div>Sevent - Additional section either with First / Second / Third</div>
</div>

css

div {
    margin:0 0 20px;
    background:green
}
div:after {
    content:'';
    display:block;
    clear:both;
}
div.first {
    float:left;
    margin:0;
}
div.second {
    float:right;
    margin:0;
}

but I am not quit sure about your last two div positioning requirement. can you elaborate plz.

Upvotes: 1

dakab
dakab

Reputation: 5915

While floating elements are still a valid approach, there are more recebt techniques like flex-box that make it a bit more hassle-free. To align your first divs, for instance, use justify-content:space-between. If you are learning CSS, dive in on your own, there’s a guide at CSS-Tricks.

Also, you could use the CSS part of a framework like Bootstrap. Its grid system provides a wide variety of layouts that should meet your requirements half way.

Upvotes: 0

Mark Leiber
Mark Leiber

Reputation: 3138

You need to clear your float:

<div style="clear:both;">
    <div>
        Second 
    </div>
</div>

Jsfiddle: https://jsfiddle.net/420x3sk7/1/

Upvotes: 1

Related Questions