CODEWITHSUNDEEP
htmlcss
redress
redress

Reputation: 1439

Divs wont align

I am trying to align 3 divs with the exact same height. the farthest right two are the exact same are are fine, but the big one on the left is consistently above them.

I have taken into account the fact that the two smaller divs have a border width of 2px, but that didnt change anything.

I have even set a container div to be the exact height of the elements, but they are still not vertically aligned:

<div id='section_4_row_1'>
        <div id='double_wide_image'></div>
        <div class='section_4_module top'>
            <div class='section_4_module_icon'>
            </div>
            <div class='section_4_module_text'>
                <p class='text_1'>Job, Music</p>
                <p class='text_2'>Fields of gold</p>
                <p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <p class='text_4'>Continue reading...</p>
            </div>
        </div>
        <div class='section_4_module top'>
            <div class='section_4_module_icon'>
            </div>
            <div class='section_4_module_text'>
                <p class='text_1'>Job, Music</p>
                <p class='text_2'>Fields of gold</p>
                <p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <p class='text_4'>Continue reading...</p>
            </div>
        </div>
    </div>

View on browser width at least 1350px

http://jsfiddle.net/51j6p5s8/

Upvotes: 1

Views: 55

Answers (3)

Brian John
Brian John

Reputation: 599

If you are wanting them to remain the same size and align, setting your wrapping element to behave like a table and interior elements to behave as table-cell will ensure they are all the same height. Margins suffer in this method, but creative use of padding or empty table cells can bring that back.

See updated fiddle here: http://jsfiddle.net/51j6p5s8/2/

Upvotes: 1

Dr Shenanigan
Dr Shenanigan

Reputation: 163

Another way of doing it is applying 

float:left; 
margin-left:20px;

on all the block elements.

Upvotes: 0

isherwood
isherwood

Reputation: 61056

Inline-block elements align to the baseline by default. 

#section_4 .section_4_module {
  ...
  margin-top: 0.5em;
  vertical-align: top;
}

Demo

Upvotes: 5

Related Questions