Aligning divisions in the webpage

Question

I am trying to build a webpage using HTML5, CSS3. I have four lists, that I have separated out in 4 different divisions.Another division #position_calls is the parent of all the above mentioned divisions.

I wish to arrange these four lists in a 2*2 array formation, where each box should have same height. I have tried doing this using "float" keyword but that didn't work out well.

JSFiddle.

#tech_calls{
    float:left;
    border:2px solid green;
    width:49%;
    height:50%;
    margin:auto;
}
#quantech_calls{
    float:right;
    border:2px solid green;
    width:49%;

}

I refrain from using "position" keyword as that might hinder with responsive pages.

Also, I can't understand why the parent red border of div #position_call doesn't covers whole area (including its child divs). But removing float property from all child div, it works fine. JSFIDDLE. So what float has to do with this?

Any help would be appreciated.

I am familiar with Javascript if that helps, Thanks!

The parent container should have an `overflow:hidden` and it should render fine. https://jsfiddle.net/ImAtWar/18yway8m/3/ — ImAtWar, Mar 22 '16 at 12:20
Take a look here: http://stackoverflow.com/questions/21014209/how-do-i-make-a-grid-with-html-and-css-with-divs — cani, Mar 22 '16 at 12:24
@ImAtWar I understand the use of overflow:hidden but I can't understand how it helps here. — Raghav Motwani, Mar 22 '16 at 12:43

Rahul Sharma · Accepted Answer · 2016-03-22T12:36:01.880

0

I have added a display property and one parent div for the top two divs and one for bottom two divs. Check it out here. So,

<div style="display:flex"> tech_calls Div quantech_calls Div </div>

Similarly for the other two.

edited Mar 22 '16 at 12:36

answered Mar 22 '16 at 12:22

Rahul Sharma

892
1
6
16

I don't downvote but it's probably because you have no code (and worse: some `enter code here`) in your answer. In the future your link may not be available anymore and thus your answer is then worthless. – Wavemaster Mar 22 '16 at 12:30
I didn't downvote either, but I'd say using display: flex; is generally not a good answer because IE will probably not handle it. – apokryfos Mar 22 '16 at 12:31
@Wavemaster Okay. I have updated it. I didn't understand why the editor wouldn't let me remove the `enter code here`, then read the description and added some code. – Rahul Sharma Mar 22 '16 at 12:32
@apokryfos supported by IE 10 and above. – Rahul Sharma Mar 22 '16 at 12:33
There's a typo in your `dsiplay'. Also you shouldn't add the css in the html tag directly if you don't need it because it can't be overwritten easily. – Wavemaster Mar 22 '16 at 12:33
@RahulSharma http://caniuse.com/#feat=flexbox indicates that while it's supported, IE 10 and 11 have some bugs with it (which can be a pain to build workarounds on). – apokryfos Mar 22 '16 at 12:35
@RahulSharma can you explain why the border in parent division didn't cover whole area in the question? – Raghav Motwani Mar 22 '16 at 12:39
1

@Wavemaster thanks for pointing out the typo. I agree with you, but I just wanted to give an idea how to do it. Adding it inline or in a separate file is upto the OP. I personally use it in an external css. – Rahul Sharma Mar 22 '16 at 12:39
@RaghavMotwani because I didn't touch your existing css. You can play around with your settings to get the desired result (like removing the border etc.). Here is the updated [fiddle](https://jsfiddle.net/18yway8m/8/). You can have it this way or further customize it. – Rahul Sharma Mar 22 '16 at 12:48

Aligning divisions in the webpage

1 Answers1