jsFiddle
I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
CSS
.box {
width:200px;
height:200px;
padding:10px;
display:inline-block;
border:1px solid black;
text-align:center;
}
RESULT
Add vertical-align:bottom to the style of your divs.
The cause of your problem is the presence of any content, as it defines the baseline for the div.
Adjusting the css like this works
.box {
width:200px;
height:200px;
padding:10px;
border:1px solid black;
text-align:center;
}
div.box{display:inline;float:left;}
jsFiddle solution
Just change the display property of the div's and they'll align vertically:
display: block
Edit: #ben said he wanted the div's aligned vertically. Vote me down if you must, but it's not my fault if he didn't know the difference between horizontal and vertical.
Related
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
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.
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/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
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/
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! :)
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
So I made four simple divs and I will be changing the property of the header div.
The HTML:
<div class="third">
Lorem Ipsum
</div>
<div class="third">
Lorem Ipsum
</div>
<div class="third">
<div class="header">Lorem Ipsum</div>
</div>
The CSS:
.third {
width:500px;
display:inline-block;
border-right:1px solid black;
height:400px;
}
.header {
margin-left:16%;
font-family:Arial;
font-size:200%;
}
The third div works great but the first two divs are pushed down because of the bigger text. What can I do to prevent this issue?
Adding vertical-align: top will fix your problem.
Fiddle: http://jsfiddle.net/QX7FH/
If you're curious why this works, andyb does a great job explaining why here: Why does this inline-block element have content that is not vertically aligned
You can use floats instead of inline-block, you also gain a little bit of browser support (old ie's):
http://jsfiddle.net/aP9Fu/
.third {
width:500px;
display:block;
border-right:1px solid black;
height:400px;
float: left;
}
Also, I added a container around all those divs in order to clear the floats.
div's are automatically set to be block elements. This means that they will create a line break. If you also put display:inline-block; in your css for your .header, it should prevent it from creating a new line.
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo