EDITED: I have a div that takes up the left half of the window. Inside that div are two other divs. How do I stack the inner divs on top of one another, while floating both divs to the right. If you look at the JSFiddle, the two divs are side-by-side
http://jsfiddle.net/eka1ccsu/1/
What's the CSS property to place one div beneath another while the two divs are float: right?
Code:
#charset "UTF-8";
/* CSS Document */
#bdy{
font-family: Verdana, Geneva, sans-serif;
position: relative;
}
#left{
height: 100%;
width: 50%;
position: relative;
display: inline-block;
float: left;
bottom: 0;
}
#right{
width: 50%;
height: 100%;
display: inline-block;
float: right;
bottom: 0;
}
#nentry {
position:relative;
float: right;
margin-top: 100px;
}
#nuser {
position:relative;
float: right;
margin-top: 100px;
}
You can use clear: both; to set a floated element on a new line. Also, setting #right and #left to inline-block does nothing for your purposes. Setting the width and then setting the float property with put both elements side by side splitting the page in half.
Inline-block TYPICALLY is used for nav elements. Or for vertically centering objects in special cases.
http://jsfiddle.net/eka1ccsu/2/
I just took a literal take on your question, i float the parent of two div, so the child behave as block element.
<div style="float:right;">
<div id="nuser">
Add New User
</div>
<div id="nentry">
Add Entry
</div>
</div>
Related
I have this html:
<div class="container">
<div id="sidebar">
<ul>Create Offer</ul>
<ul>Accept Offer</ul>
<ul>Pending</ul>
<ul>Completed</ul>
<ul>Balance</ul>
<ul>Support</ul>
</div>
<div id="items">
Text
</div>
</div>
this is the css:
.container {
margin: 0 auto;
background-color: white;
border: 1px solid black;
width: 1000px;
}
#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
.container #items {
width: 82%;
float: right;
background-color: red;
}
output: http://puu.sh/l719c/52f182e1d2.png
why wont the items div show within the container in the white space next to the sidebar?
thanks.
When you float an element, it moves to the side and lets content that follows it move up beside it.
That means the content that follows items (if there was any) would be next to it.
You've done nothing to let items move up beside sidebar.
You need to float sidebar left and not items right.
Also beware of horizontal margins/padding making the total width of the elements add up to more than 100%.
Also note that floated elements do not restrict the height of their container unless you do something about it.
I'd generally look to flexbox for aligning blocks on a row, rather than floats.
You have just missed one line. The float for the sidebar must be set so that other elements can use the empty space. Change your css for #sidebar as follows.
#sidebar {
float: left;
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
I'm assuming you want your sidebar set to float:left;. So you can position the "items" right next to the "sidebar" div.
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I have a container that drops down like a notification container, I want to have two bars side by side inside the absolutely positioned div.I don't want to have to define a width because each div inside will need to adjust widths (because of the presence of a scrollbar or not)
The problem is odd, when .notification-wrapper has absolute or relative positioning the .left and .right divs won't align side by side, however when i remove absolute/relative from .notification wrapper they do...(i do need relative/absolute to be applied to notification.wrapper)
Here's what I have:
<span class="notification-wrapper">
<div class="notification-container">
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</span>
.notification-wrapper {
height: 32px;
width: 25px;
margin-right: -12px;
margin-left: -12px;
padding: 0px;
font-size: 0px;
position: absolute;
left: 50%;
top: 15px;
right: 50%;
}
.notification-wrapper .notification-container {
font-size: 12px;
background-color: #FFF;
height: 100px;
position: absolute;
top: 25px;
}
.notification-container .left {
vertical-align: text-top;
display: inline-block;
background-color: #63F;
width: 50px;
}
.notification-container .right {
vertical-align: text-top;
display: inline-block;
background-color: #FFC;
width: 120px;
}
That's because when you position an element it "shrink-wraps", meaning it shrinks to its smallest size. Since there's nothing forcing your two elements to reside side by side the smallest size it can get is if it stacks the elements instead.
I think, since you're using inline-block (rather than float), you could use white-space: nowrap on the container to force the two inline-block elements not to wrap. You will probably wanna set white-space back to normal for the contents of the elements though.
Also, a span element is an inline version of div and does not allow block level elements as children.
I do not know your code, Please try this code
.absolute-positioned{ overflow:hidden; float:left; width:auto;}
.absolute-positioned ul{ width:auto; list-style:none;display:inline-block; }
.absolute-positioned ul li{ display:inline-block; list-style:none; line-height:auto;}
.absolute-positioned ul.left-bar{ float:left; width:auto;}
.absolute-positioned ul.right-bar{ float:right; width:auto;}
Try this
remove width:25px from .notification-wrapper
remove position:absolute and top:25px from .notification-wrapper .notification-container, instead use padding-top:25px
change right:50% in .notification-wrapper to left:50%
In a wrapper div, the floated elements don't seem to respond to left and right margin settings. Example:
html:
<div id ="wrapper">
<div id = "content"></div>
</div>
css:
#wrapper
{
width: 1000px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content
{
width: 400px;
height: 200px;
display: block;
float: left;
margin-left: 30px;
}
The #content ignores its left margin setting. Why?
Margins do not move floated elements, they "push content away".
If you want to move the floated element, you could give it the following CSS rules:
#content {
position: relative;
left: 30px;
}
An alternative is giving the element a transparent border:
#content {
border-left: 30px transparent;
}
If you are just looking to position a div inside of another div, then use absolute positioning:
#wrapper {
position: relative; /* required for absolute positioning of children */
}
#content {
position: absolute;
left: 0;
}
A more recent CSS technique that works perfectly in this scenario is to use the CSS transform property with a translate X or Y. This acts on the floated element only, so does not have the unintended effect of moving other elements around.
An example transform is this:
.floated-element {
// move the floated element 10 pixels to the left
transform: translateX(-10px);
}
#Marcus's answer is good. Another way to fake having margins on a floated element is to put the content inside of another container and use padding:
.outer
{
float: left;
padding: 10px;
}
.inner
{
}
I have 2 div in on page
<div id="main"></div>
<div id="panel"></div>
and using float to make main at left, and panel at right
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
float: left;
margin-left: 830px;
position: absolute;
}
I want to let panel fill with the left page space, which css should I use?
Just don't float it, and make it relatively positioned. Take out the margin as well. Floating "main" means that it will simply be to the left of "panel" all the time. If you define "main" how you want, "panel" will automatically take up the remaining space.
#photos-main {
float: left;
width: 800px;
position: relative;
}
#panel {
}
Looks like you're trying to build some layout, right? If that's the case, consider implementing (hence learning from) some of the techniques presented in these links:
40 Tutorials and tips about CSS Layouts
CSS Positioning
The perfect three columns layout
Hope it helps!
You could do it with floating with this approach:
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
Then you have to wrap the two Tags with another , which get a total width of both elements.
To clarify this two column layout and put e.g. a footer beneath, put another in your HTML-Structure and set into the css simple a "clear:both;", so the floating will be stopped.
Complete Sample
HTML
<div id="wrap">
<div id="photos-main"></div>
<div id="panel"></div>
<div id="clear"></div>
</div>
CSS
#wrap {
width: 900px;
}
#photos-main {
float: left;
width: 800px;
}
#panel {
float: right; /*to have the panel on the right side*/
width: 100px; /*with a width of 100px*/
}
#clear {
clear:both;
}