Fixed parent, position it's child right

Question

I'm trying to create a top bar for my webpage thats seperated into two sections. However, I'm having difficulty getting my divs positioned. It would appear the wrap collapses with these styles set. Howe can I avoid this.

I have somthing like this,

<div id="wrap"> <div id="one"></div> <div id="two"></div> </div>

Css is as follows;

#wrap { position: fixed; top:0; width: 100%; background-color:#ff0; } #one { position: relative; left:0; width: 40%; background-color: #f00; } #two { position: relative; right:0; width: 40%; background-color: #00f; }

I want it to display on page something like this...

|One | (wrap underneath) | Two|

Any help would be much appreciated.

The wrap "collapses" because none of the element has any height. — Paulie_D
– Paulie_D, Commented Apr 3, 2016 at 20:34
You would think adding content would define height, but that fails also... — Lewis
– Lewis, Commented Apr 3, 2016 at 20:36

CodeWeis · Accepted Answer · 2016-04-03 20:35:21Z

you can use flexbox

#wrap { position: fixed; top:0; height:50px; width: 100%; background-color:#ff0; display:flex; justify-content: space-between; } #one { height:50px; width: 40%; background-color: #f00; } #two { height:50px; width: 40%; background-color: #00f; }

<div id="wrap"> <div id="one"></div> <div id="two"></div> </div>

Paulie_D · Accepted Answer · 2016-04-03 20:36:50Z

Flexbox can do that.

#wrap { position: fixed; top: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #ff0; } #one { height: 50px; width: 40%; background-color: #f00; } #two { height: 50px; width: 40%; background-color: #00f; }

<div id="wrap"> <div id="one"></div> <div id="two"></div> </div>

JSFiddle Demo

Collectives™ on Stack Overflow

Fixed parent, position it's child right

|One | (wrap underneath) | Two|

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

|One | (wrap underneath) | Two|

2 Answers 2

Comments

1 Comment

Related