I am attempting to get two divs to be side-by-side and in the center of a wrapper div. My current method is to align the wrapper contents to center, then display as an inline block. However, this does not work in IE7, which I must code for. I've added a JS fiddle with a simple example. Is there a way to accomplish this in IE7?
jsfiddle
http://jsfiddle.net/QDn6T/
HTML
<div id="wrapper">
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</div>
CSS
#wrapper{
height:800px;
text-align:center;
background-color:orange
}
#div1{
background-color:green;
width:100px;
display:inline-block;
}
#div2{
background-color:blue;
width:100px;
display:inline-block;
}
There is an IE7 hack that will allow for proper display of elements as if they are inline-block elements. The hack is added to css as below.
#div1{
width:300px;
display:inline-block;
zoom:1;
*display:inline;
}
The * allows for only IE to interpret the display:inline property. zoom:1 allows for the inline element to display with the width, by triggering hasLayout. Source below:
http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug
Related
I've got what I think to be quite an interesting problem. Whenever I try to vertical-align all the elements I need - it won't work, but if I leave one out, it appears to work.
Here's the code:
<body style='margin:0; width:100%; height:100%; background-color:#e8e7e7'>
<div id='holder' style='width:100%; height:100%; margin:0'>
<div id='blackout' style='width:100%; height:100%; background-color:#000; opacity:0.5; position:absolute; z-index:1'></div>
<div id='data_holder' style='width:100%; height:100%; z-index:2; position:relative; text-align:center'>
<div id='geo' style='width:96.9%; height:40%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_v' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_d' style='width:24%; height:25%; background-color:#9F6; display:inline-block; '></div>
<div id='dis_b' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
<div id='dis_o' style='width:24%; height:25%; background-color:#9F6; display:inline-block; vertical-align:middle'></div>
</div>
</div>
</body>
I would like to know what's causing this problem and how can I solve it and vertical-align all the elements inside the data holder div.
Here's a jsFiddle of the problem.
I think the key idea that you're missing is that you need to set line-height in data_holder. That's just how vertical-align works. (You'll need to use a height like 200px rather than 100%.) See this question for better info:
How do I vertically center text with CSS?
vertical-align work just for text. I usually use margin/padding for vertical align. And add your code to a playground.
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
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.
I have two <p> elements inside a <div> element, and want to position them at the center of the <div> element. e.g.
<div id="mydiv">
<p class="above">some text</p>
<p class="below">other text</p>
</div>
Note: the <div> element itself is not positioned at the center of the browser window, so the positioning of <p> elements is only relative.
text-align: center;
for text.
margin: 0 auto;
for block level elements like a div.
EDITED:
Add following css rules in #mydiv
display:table-cell;
vertical-align:middle;
Like This
#mydiv{
position:relative;
border:1px solid #000;
width:400px;
height:300px;
display:table-cell; /* Added rule - Note: IE8+, Firefox, Chrome, Opera, Safari */
vertical-align:middle; /* Added rule */
}
#mydiv p{
text-align:center;
}
UPDATED DEMO
text-align: center;
It's worked for me.
You may try;
margin-left:auto;
margin-right:auto;
to your p
Here is a Live Demo
If you want to center both vertically and horizontally, you may try Dead Center
Here is a demo showing centering a div Both Vertically and Horizontally
I have some elements I want to display. But sadly it does not work the way I want it.
Here is how it works:
http://jsfiddle.net/lukasoppermann/H3Nmg/7/
I want it so that the red boxes fill the space between the green box and the left side.
It needs to be dynamic though. The width of the container might change and the order of the elements can be different.
I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?
// EDIT
To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.
Thats what I want.
http://img526.imageshack.us/img526/613/boxsorting.jpg
Hi you can define three div as like this
css
.container{
float:left;
margin-left:10px;
}
.top{
width:100px;
height:100px;
background:red;
}
.middle{
width:100px;
height:100px;
background:darkred;
margin-top:5px;
}
.right{
width:100px;
height:200px;
background:lightgreen;
float:left;
margin-left:10px;
}
.bottom{
float:left;
width:100px;
height:100px;
background:green;
margin-left:10px;
}
HTML
<div class="container">
<div class="top"></div>
<div class="middle"></div>
</div>
<div class="right"></div>
<div class="bottom"></div>
Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/
What about using float:right to row-two div. You might have to fix the padding to make the green closer to red if you want. demo here http://jsfiddle.net/H3Nmg/9/
Should it look like this http://jsfiddle.net/H3Nmg/14/
Minus the hard coded width.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/H3Nmg/20/
demo: http://jsfiddle.net/H3Nmg/20/embedded/result/
Note: try to reduce the window size or width of the container div you will see the case and case output will come.