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.
Related
You can watch the problem here at jsfiddle - http://jsfiddle.net/Askerov/xz4t4bce/
The thing is i want to move the inside element, but i do not want parent element to move with it? Can anybody explain how it works? And how do i move such element?
.aa{
background:#ccc;
width:600px;
height:300px; }
.bbb{
background:#333;
width:150px;
height:50px;
margin-top:40px;}
<div class='aa'>
<div class='bbb'>
</div>
You're seeing collapsing margins. Just add overflow:auto; to the parent div to restore the behavior you seek
jsFiddle example
ALWAYS add the position of the elements, once you do that, it will allow you to move it, see here:
.aa{
background:#ccc;
width:600px;
height:300px;
position:relative;
}
.bbb{
background:#333;
width:150px;
height:50px;
top:40px;
position:absolute;
}
jsFiddle
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
I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:
#logoRedrum{
position:relative;
width:50px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
The HTML for the image is as follows:
<img id="logoRedrum" src="resources/img/logoRedrum.png">
What I'm trying to do with this is to have my image centered at all times. Instead of having it centered, it is doing this:
The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.
All help greatly appreciated!
Add display:block; to img
#logoRedrum{
position:relative;
width:50px;
display:block;
margin:0 auto
}
DEMO
If you need to center the image in the main parent its easy, do it like this
//HTML
<div class="centered-content"> <img class="no-margin" src=""/> </div>
//CSS
.contered-content {
text-align:center;
}
.no-margin{
margin:0 auto;
}
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 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.