This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 1 year ago.
i wanted to know how to put two div right next each other centered in the page like this:
divLeft | div right
|
|
|
|
thank you :))
.float-left
{
float: left;
}
.float-right
{
float: right;
}
.wrapper
{
width: 500px;
}
<div id="WrapperDiv" class="wrapper">
<div id="RightDiv" class="float-right">Content for right div goes here</div>
<div id="LeftDiv" class="float-left">Content for left div goes here</div>
</div>
You can adjust the width value in wrapper class to suit your needs.
Using float:left; and display:inline;, also you might want to set the width, using width:200px;.
Well, depending on how expandable it is you could do the following:
.rightDiv
{
float: left;
margin-left: 400px; /* Or whatever */
width: 400px;
}
.leftDiv
{
float: right;
margin-right: 400px;
width: 400px;
}
I haven't tested it but basically you want to float them the wrong way and then use the margin to push it back towards the center line.
Related
i have a main div has 100% width, and 2 divs in it. one has 200px width and other will be 100%-200px, i mean;
-----------------this is main div -------------
| |
| ----subdiv1---- -------------subdiv2----------|
|| | | ||
| -------------- ---------------------------- |
|-----------------------------------------------|
subdiv1 has 200 px, subdiv2's width will be rest of empty space. I search on google but couldnt find.
Here's one possible solution I hacked up using a float: left rule for the left-most div, and a margin-left rule for the right div: http://jsfiddle.net/P4xMj/
Example HTML:
<div id="container">
<div id="left">
Some content here
</div>
<div id="right">
Some more content goes over here on the right. Let's make this
content really long to see what happens when we wrap more than
one or two line's worth. Extra text to fill the void.
</div>
</div>
Example CSS (the background colors are just for visibility):
#container {
background: #FF0;
overflow: auto;
padding: 10px;
}
#left {
background: #0F0;
float: left;
width: 200px;
}
#right {
background: #F00;
margin-left: 210px;
}
You're going to want to add float:left; to your subdiv1. Here is a few lines of code that will produce what you have shown.
<div>
<div style="float:left;width:200px;background:#0F0">
SUBDIV1
</div>
<div style="background:#F00;">
SUBDIV2
</div>
</div>
In short, use float:left; on your subdiv1
You can float: left the left div, and have margin-left: 200px on the right div.
http://jsfiddle.net/SpxH9/
HTML:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS:
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
margin-left: 200px;
}
There's another technique you can use, which is to replace margin-left with overflow: hidden. This is useful because you don't have to have the dimension in there twice, and it adapts to changes more easily.
For example, with 10px borders: http://jsfiddle.net/SpxH9/1/
#container {
overflow: hidden;
}
#left {
float: left;
width: 200px;
}
#right {
overflow: hidden;
}
If you try to do the same thing with the first technique I mentioned, you'll find that you have to manually calculate stuff: http://jsfiddle.net/SpxH9/2/ (and fixed: http://jsfiddle.net/SpxH9/3/)
Lastly, overflow: hidden on #container is used to contain the floats. You might wish to use clearfix instead.
How to achieve the following with CSS?
--------------------------------------------------
| DIV 1: 50px | DIV 2: FLUID | DIV 3: 50px |
--------------------------------------------------
I don't have an issue with a 2 columns layout having the right div fluid, but i can't figure out how to make the above.
Demo: http://jsfiddle.net/SKsmJ/
<div style="float:right;width:50px;"></div>
<div style="float:left;width:50px;"></div>
<div style="margin:0 55px;"></div>
It's not the nicest solution, but you could use nested divs, set the main div's width to whatever you want for your page's width and position the other two with float.
HTML:
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
main
</div>
CSS:
div {
display: block;
}
#main {
width: 100%;
}
#left, #right {
width: 50px;
}
#left {
float: left;
}
#right {
float: right;
}
Here's a working example: http://jsfiddle.net/davehauser/6qVwR/
All you have to do is to float both the right and left div, making sure you're right div is the first in the HTML.
I edited the jsfiddle you provided : http://jsfiddle.net/AsKGL/
You just need to float: left all divs, specifying width:50px for the first and last div.
Here's a super basic jsFiddle: http://jsfiddle.net/Simo990/V3PtW/1
I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).
But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-
<container>
<leftContainer>
<leftColumn>
<mainContent>
<rightColumn>
<centerColumn>
And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?
Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.
How do I do this ?
If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.
Example: <-- click for a demo
<div id="container">
<div id="left_container">
<div id="left">left</div>
</div>
<div id="right_container">
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</div>
<style type="text/css">
#container {
width: 160px;
}
#left {
float: left;
width: 80px;
height: 100px;
background-color: #eee;
}
#right {
clear: left;
float: left;
width: 80px;
height: 100px;
background-color: #ccc;
}
#middle {
float: right;
width: 80px;
height: 100px;
margin-top: -100px;
background-color: #aaa;
}
</style>
I don't believe this is possible with an "easy" fix. You can think of divs as boxes, and what you're trying to do is to keep the center column to the right of the left column while putting the right column below (which would distort the box).
There is a fix where you can make the rightColumn position absolute and set the position of the column relative to the window itself. However, I don't suggest you do this. Instead, you should probably modify the css and put the right column in the same parent div as the left column.
I have a container on my test site:
#container {
margin: 0 auto;
}
Then I added the left vertical menu and on some small screens that menu is not fully visible.
Like my old laptop :-)
I want to keep the margin:auto setting in place but I want to move the whole #container a little bit to the right.
Could it be done some how?
I have tried #container {margin-left:10px;}, but to no avail.
Playing with firebug, it's good to use:
#container {
margin: 0 auto;
position:relative;
left:10px;
}
Hope it solves...
The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:
<div style="margin-left: 10px;">
<div id="container" style="margin: auto;">...</div>
</div>
That way the centering is being done within a container div that's already got the appropriate left-hand padding.
If you wrap your #container div in another div with double the left margin, that will work.
#wrap {
margin-left: 20px;
}
.centre { /* this would be your #container */
width: 100px;
height: 40px;
margin: auto;
background-color: #f00;
}
#wrap .centre {
background-color: #00f;
}
The HTML:
<div class="centre"></div>
<div id="wrap">
<div class="centre"></div>
</div>
http://jsbin.com/emogu3
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.