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>
Related
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
I have got the following code working fine on FF. As you can guess, I want the following two divs stays on one line without breaking when browser resize.
<div style="float: left; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
But as per usual, when I tested the page with IE 9, the right div was already below the left one.
Can someone pls help me out here, thanks,
Either add "float:right" in your second div or
add "width:XXpx" into your first div.
Wrap it with another div
<div>
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
</div>
you also float the other div
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
==========================================================>>>
UPDATE
HTML
<div class="marginRight"></div>
<div></div>
CSS
div {
float:left;
border:1px solid red;
width:45%;
height:100px;
}
.marginRight {margin-right: 10px;}
WORKING DEMO
it is working fine
if you want more configuring
<div style="display:table-row;">
<div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
<div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>
Use a container div and set the two divs to either % of total width or total px of the page.
#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}
<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>
Remember if you use margins and paddings you will need to adjust the percentages or pixels for it to line up next.
For example. If you add padding 1% to left div, it will push the right div down to second line since you are now at a total of 101% of the container divs width.
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
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>