Log in

View Full Version : divs tops not aligning


gib65
07-08-2015, 07:51 PM
Please have a look at the following HTML:



<html>
<head></head>
<body>
<div style="background-color: red; display: inline-block;">
line 1<br>
line 2
</div>
<div style="background-color: blue; display: inline-block; padding-top: 20px;">
line 1<br>
line 2
</div>
</body>
</html>


I have two divs both inline-block. The first one is red and the second one blue. The blue one has padding-top: 20px. This seems to be forcing the red one to have a top margin. I'm not sure how to set the divs to have their tops aligned. Can anyone tell me how this is done?
Beverleyh
07-08-2015, 08:18 PM
I think I've mentioned the box-model to you before - it is affected by padding and borders. You should look in to that and also the vertical-align property for inline-elements.
molendijk
07-09-2015, 08:30 AM
Vertical alignment:
<div style="background-color: red; display: inline-block; vertical-align: top">
line 1<br>
line 2
</div>
<div style="background-color: blue; display: inline-block; padding-top: 20px;">
line 1<br>
line 2
</div>
gib65
07-10-2015, 07:31 PM
Thanks both,

This works.