CODEWITHSUNDEEP
htmlcss
SamJolly
SamJolly

Reputation: 6487

trying to get a 3rd div to "float over" 2 divs which are "float left" and "float right"

I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.

So for some code:

<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
  <div id="div1" style="float:left">Div1</div>
  <div id="div2" style="float:right">Div1</div>
  <div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>

I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.

Thanks in advance.

Upvotes: 1

Views: 130

Answers (4)

Simply Craig
Simply Craig

Reputation: 1114

You really should separate your CSS and HTML, but this is what I did...

Add width:inherit to your div3 and position:absolute:

<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
  <div id="div1" style="float:left">Div1</div>
  <div id="div2" style="float:right">Div1</div>
  <div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>

You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.

Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/

If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)

Upvotes: 1

Vall3y
Vall3y

Reputation: 1181

First of all, the style attribute on 3rd div isn't closed. Use ; to separate between style statements in the style attribute. And its color, not colour I would also suggest using a css

Heres a codepen: http://codepen.io/Vall3y/pen/QwWPYd

If you want the container to float in the center, its enough to give it margin: auto Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative

#div3 {
  border:1px solid black;
  color:black;  
  margin: auto;
  width: 30%;
}

Heres a codepen: http://codepen.io/Vall3y/pen/gbOyEb

Also consider using display: flex and ditch the floats altogether http://codepen.io/Vall3y/pen/ogNOVV

If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 4

AnchovyLegend
AnchovyLegend

Reputation: 12538

No relative or absolutely positioned elements needed! This should give you what you want:

CSS:

#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}

HTML:

<div id="container" >
    <div id="div3">I look like a button and I float the other divs, in a central location</div>
  <div id="div1">Div1</div>
  <div id="div2">Div3</div>
</div>

Heres a live demo:

http://jsfiddle.net/Lza5fz43/

Upvotes: 1

RGLSV
RGLSV

Reputation: 2058

I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here

Upvotes: 1

Related Questions