CODEWITHSUNDEEP
htmlcss
user1744413
user1744413

Reputation: 115

two divs next to each other, one with top margin

I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(

please suggest.

Picute

Upvotes: 0

Views: 522

Answers (4)

Luca Detomi
Luca Detomi

Reputation: 5716

Flex-box could be the best and easier solution.

IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.

Please, look at Flexible Box Layout Module

Upvotes: 0

CMPS
CMPS

Reputation: 7769

Here's what you want, tested and working :)

http://jsfiddle.net/4FWWp/

HTML

<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>

CSS

#first{
    background-color:red;
    float:left;
}

#second{
    background-color:blue;
    float:left;
    margin-top:52px;
}

Upvotes: 1

ramesh
ramesh

Reputation: 2477

Took a quick stab at it and it seems possible. What you need to is display inline-block on the divs and set the height of the divs as percentages. Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/ The grey background is of the parent div.

Upvotes: 0

Muhammad Umer
Muhammad Umer

Reputation: 18097

Take a look: http://jsfiddle.net/Dc99N/

.d {
    display: inline-block;
    border:2px solid;
    width: 200px;
    height: 200px;
}

.sm {
   margin-top: 50px;
   height: 150px;
}

Upvotes: 1

Related Questions