I'm placing some text at arbitrary absolute positions inside a wrapper-div on my page. The most natural placement would be to specify the left and top values of the middle of the bottom edge of the element boxes of the text I am placing. My current solution seems complicated with 3 nested divs. Is there an easier way?
<div class="wrapper">
<div class="a">
<div class="b">
<div class="c">TEXT123<br/>TEXT123123</div>
</div>
</div>
<div class="a">↖</div> <!--for illustration only-->
</div>
with
.wrapper {width:300px; height:200px; background-color:yellow;}
.a {position:absolute; left:200px; top:100px;}
.b {position:absolute; bottom:0;}
.c {position:relative; left:-50%; border:solid 1px;}
See: http://jsfiddle.net/TTc23/
See if this works for you :
HTML:
<div class="wrapper">
<div class="c">TEXT123<br/>TEXT123123</div>
</div>
CSS:
.wrapper {width:300px;height:200px;background-color:yellow;display:table-cell; vertical-align:middle; text-align:center}
.c {border:solid 1px;margin:auto; width:100px}
http://jsfiddle.net/zHEXQ/
I have added following additional css properties to "wrapper" div
display:table-cell; vertical-align:middle; text-align:center
changed css for "c" div to :
.c {border:solid 1px;margin:auto; width:100px}
removed divs "a" & "b"
Related
I want to align the text in the middle (Horizontal & Vertical) of each single box:
HTML:
<div class="piclist"><span>Tag 1</span><div class="overlay"></div><div class="tabpic foto1" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></div>
<div class="piclist"><span>Tag 2</span><div class="overlay"></div><div class="tabpic foto2" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></div>
<div class="piclist"><span>Tag 3</span><div class="overlay"></div><div class="tabpic foto3" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"></div></div>
<div class="piclist"><span>Tag 4</span><div class="overlay"></div><div class="tabpic foto4" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"></div></div>
I think there is a problem with the nested divs: https://jsfiddle.net/brL822vb/
The trick I use is Table and Table Cells to use the vertical-align property.
You seem to have a lot of tags inside that element where its not really needed - these are the 3 you need and I think you can make your example work nicely by stripping down.
Put your background image on the Box, the Overlay is your semi transparent layer, and the span is your text.
HTML:
<div class="box">
<div class="box-overlay">
<span>Text</span>
</div>
</div>
CSS:
.box{
width:400px;
height:400px;
border:1px solid red;
}
.box-overlay{
display:table;
height:100%;
background:rgba(0,0,0,0.5);
width:100%;
}
.box-overlay span{
display:table-cell;
vertical-align:middle;
text-align:center;
height:100%;
width:100%;
}
See JSFiddle Here
For a visual, please visit this fiddle:
http://jsfiddle.net/rR8Hh/
The effect I am trying to achieve is that, in this example, the left side of the 5th div.child should be visible, just to the right of the 4th child div.
Instead, there is a line break and so none of this element can be seen. Using white-space: nowrap has no effect.
HTML:
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
CSS:
#parent{
height:90px;
width:400px;
overflow:hidden;
border:3px solid black;
white-space:nowrap;
}
.child{
float:left;
height:80px;
width:80px;
margin:5px;
border:1px solid red;
}
I know I've achieved my desired effect before, but I can't seem to figure out how I did it.
A slightly crude but working way of doing this is to wrap the child divs in another div with a large width. For example:
CSS:
.wrap{
width:9999px;
}
HTML:
<div id="parent">
<div class="wrap">
<div class="child">1</div>
<!-- etc -->
</div>
</div>
I only set the width to 9999 because I didn't know how many child elements you have. The width could be calculated and set when the server outputs the page or you could use a small piece of javascript (wrapper width = number of child elements * child outer width).
Here it is working: http://jsfiddle.net/rR8Hh/4/
The similar question was here but my divs haven't fix size at all. I need follow stucture:
<div style="float:left;"></div>
<div style="float:left;"></div> <!-- this div should be what's left after the first and third divs -->
<div style="float:right;"></div>
I have tried to set overflow:hidden; for the second div but it doesn't help.
You can achieve with the combination of white-space & display:inline-block like this:
HTML:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">2</div>
</div>
CSS:
.child{
display:inline-block;
*display:inline; /* for IE7*/
*zoom:1;/* for IE7*/
min-width:100px;
min-height:50px;
margin-right:10px;
background:red;
white-space:normal;
}
.parent{
white-space:nowrap;
}
http://jsfiddle.net/QdvFp/1/
Here is my example:
<div id="mainContainer">
<div id="itemIWantToCenter"></div>
<div id="itemIwantFloatedRight"></div>
</div>
The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!
Hope this helps:
<div id="mainContainer">
<div id="itemIWantToCenter" style="float: right;"></div>
<div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
Here's a fiddle of my solution and the code is below (fixed link)
The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.
Hope this helps.
Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of the window {hover over the dividers, click and drag}, to see the benefits.
<div class="container">
<div class="content">
centered content
</div>
<div class="right">
right
<div>
</div>
.container {
width:100%;
position:relative;
}
.container .content {
width:auto;
margin:0 200px;
background:green;
}
.container .right {
width:200px;
position:absolute;
top:0px;
right:0px;
background:#f00;
}
.content, .right {
height:300px
}
You should use a linked stylesheet ofcourse...
<div id="mainContainer" style="width:100%; border:solid 1px red;">
<div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
right
</div>
<div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
center
</div>
</div>
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>