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
Related
I'd prefer to do this using only CSS.
I have a relative element which contains an absolute element. I want the relative element to be sized based on how big the absolute element is, so in other words it should wrap neatly around it. To illustrate, in this fiddle, "footer" is positioned underneath "header-wrapper", but it overlaps its contents because "header-wrapper" is ignoring its absolute contents: http://jsfiddle.net/cxmjdL78/1/
HTML
<div class="wrapper">
<div class="header-wrapper">
<div class="header-1">HEADER HEADER HEADER</div>
<div class="header-2">HEADER HEADER<br>HEADER HEADER</div>
</div>
<div class="footer">this text should go below the header</div>
</div>
CSS
.wrapper {
position:relative;
width:300px;
height:300px;
}
.header-wrapper {
position:relative;
}
.header-1 {
position:absolute;
background:#232323;
width:100%;
height:auto;
opacity:0.4;
}
.header-2 {
position:absolute;
background:#323232;
width:100%;
height:auto;
opacity:0.4;
}
.footer {
position:relative;
background:#26d452;
opacity:0.4;
}
When you use position:absolute on an element, you "take it out of the flow". You can't get a size based on a absolutely positioned element as far as I know. You have to set the height on your header-wrapper, or use javascript to achieve the effect.
Why do you have to use position absolute?
For a CSS only solution, the only thing I can think of is to add a height to your header-wrapper. If the content in your div is static, this will solve your problem, but if it's dynamic, you're going to be forced into some kind of JavaScript solution.
i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
Does anyone know why the float:left isn't working? Basically, I have a div with class=boxscore_first, which is in the correct position. Then I have two more divs with class=boxscore which are appearing on top of the first. I want them to appear in sequence to the right of the first one. I want them to all float next to each other..
HTML
<div id="menu">
<div id="scoreboard"></div>
<div class="boxscore_first"></div>
<div class="boxscore"></div>
<div class="boxscore"></div>
</div>
CSS
.boxscore_first {
width:60px;
height:60px;
background-color:red;
margin-top:-60px;
margin-left:13px;
float:left;
}
.boxscore {
width:60px;
height:60px;
background-color:blue;
float:left;
margin-top:-60px;
margin-left:13px;
}
Actually, according to HTML you provided, you have three boxes. Left one and right one are .boxscore_first and the middle one is .boxscore.
Another and more relevant thing is that the .boxscore_first is a div. That means it's a block element. It doesn't float. In other words it wants to be alone in the line. You have to make both .boxscore_first and .boxscore float: left.
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.
http://jsfiddle.net/PZ5AZ/
Please advise me what to do to make text Send Vertical align middle .also please advise that these problems not came in future what can i do ?
As has been previously said vertical alignment is not really supported on anything that isn't a table cell.
But if you are just trying to center a single line of text you could use line-height. If you set the line-height to the same as the height of the element and remove any padding then the text will display in the middle of the element, just as if it is vertically aligned.
So on your example the following would work (if you remove the default styles first):
line-height:28px;
height:28px;
padding:0px;
But if the text wraps to more than one line this solution won't work, the text will suddenly become very spaced.
For a more general solution it is best to use javascript to dynamically work out the padding required for the particular element.
You can't vertically align text outside of tables so there are two options:
You play with the padding of the parent element to achieve the illusion of v-aligned text. As illustrated by Mr Long.
or
You make the parent element position:relative; and the child element absolute:
<div id='container'>
<div id='txt'>My Text</div>
</div>
#container{
position:relative;
}
#txt{
position:absolute; left:0px; top:50%;
margin-top:10px; /* half the height of the text element */
}
/* hint: for scaling attributes use %'s */
I think the first option is the simplest in your case.
Good luck Bro!
W.
if you like to center the text inside the div vertically and perhaps horizontally you can try this
#container{
position:relative;
width:200px;
height:300px;
border:1px solid #CCCCCC;
}
#txt{
position:absolute;
width:150px;
height:50px;
top:50%; left:50%;
margin-top:-25px; /* 1/2 of height */
margin-left:-75px;/* 1/2 of width */
border:1px solid #FF0000;
}
<div id="container">
<div id="txt">My Text</div>
</div>
Try this: padding: 0px 0px 4px 0px;
Add this to clear default button padding in Mozilla:
button::-moz-focus-inner {
border:0;
padding-top:0;
}