Currently have 2 divs...left is full of content and right is a sidebar 300px wide. I'd like them to be side by side, left and right but can't seem to get it right. I need the left div to take up the whole screen less the 300px for the right div.
Is it possible to have the right div in the left divs right margin?
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container {
width: 100%
}
#left {
float: left;
margin-right: 350px;
}
#right {
float: left;
width: 300px;
padding-left: 25px;
}
edit:
Can i also have the right side position: fixed?
Solutions below work, but when i make the right div position: fixed; the div is no longer to the right of the left div.
Change the right and left div order like:
<div id="container">
<div id="right"></div>
<div id="left"></div>
</div>
Remove the float:left from #left in your CSS and change #right to float:right
#container {
width: 100%
}
#left {
margin-right: 350px;
}
#right {
float: right;
width: 300px;
padding-left: 25px;
}
EDIT:
My solution should work with position: fixed;, just remember to add right:0 to the fixed div.
#container {
width: 100%
}
#left {
margin-right: 350px;
}
#right {
position: fixed;
right: 0;
width: 300px;
padding-left: 25px;
}
Change your markup to:
<div id="container">
<div id="right"></div>
<div id="left"></div>
</div>
And CSS to:
#left {
overflow: hidden;
}
#right {
float: right;
width: 300px;
padding-left: 25px;
}
The left div will automatically take up the whole space next to the floated 'sidebar'.
Instead of re-ordering the content, you could just add a width:100% and negative margin to the #left div.
http://jsfiddle.net/daCrosby/FGMGB/
HTML
<div id="container">
<div id="left">Left Col</div>
<div id="right">Right Col</div>
</div>
CSS
#container {
width: 100%
}
#left {
float: left;
width: 100%; /* full width of #container */
margin-right: -325px; /* #right's width + left & right padding & margin */
}
#right {
float: left;
width: 300px;
padding-left: 25px;
}
Edit
From your comment elsewhere here, you need #right to be position:fixed. This will take the element completely out of the stack of elements, so float is unnecessary (and wont work anyways). Instead, just set the fixed positioning and you're good to go.
Relevant CSS, using same HTML as above
#container2 {
width: 100%
}
#left2 {
width: 100%; /* full width of #container */
margin-right: -325px; /* #right's width + left & right padding & margin */
background:#ddd;
}
#right2 {
position:fixed;
right:8px;
top:28px; /* set the right and top to whatever positioning you need. */
width: 300px;
padding-left: 25px;
background:#444;
}
jsFiddle
Take a look at:
Creating Liquid Layouts with Negative Margins (http://alistapart.com/article/negativemargins)
The problem with some of the answers is that you may not want to re-order the content because you may want the ability to move the right div under the left div in a responsive design, which would get increasingly more difficult if we reorder the content. Unfortunately #DACrosby's answer can lead to some wicked overlap of the right div on top of left div's content.
My solution was to set a positive padding-right that matches the negative margin-right on the left div, and set box-sizing: border-box.
.container {
clear:both;
}
.left {
box-sizing: border-box;
float:left;
width: 100%;
margin-right: -325px;
padding-right: 325px;
background:#ddd;
}
.right {
box-sizing: border-box;
background:#666;
position:fixed;
right:0;
width: 300px;
}
This works with or without the position:fixed; right div.
jsFiddle
Related
I have two divs, both are floating left. "Left" div would be left column of the page. "Right" div would be the main content.
HTML:
<div id="wrapper">
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
<div id="docked_div">
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 250px;
background: red;
}
#right {
float: left;
background: blue;
}
This works fine. Now I have the third div named docked_div. This div should be outside the wrapper and on the right side of right div (about 20px from top of right div).
So, the black div now is on the left side, but it should be on the right side and outside the wrapper.
I have tried to set position to relative or absolute in different ways, but I cannot get
the result I want. I do not have much CSS knowledge on creating layout, so, I would appreciate any suggestions and guidance.
Here is the full example:
http://jsfiddle.net/TA7Rh/
I think this will work
#wrapper {
margin: 0 auto;
margin-top: 35px;
width: 1005px;
position: relative;
}
#docked_div {
/*background: url(../images/mazais_fons.png);*/
background-size: 100%;
width: 53px;
height: 212px;
position: absolute;
right:-60px;
}
jsFiddle Link
change the right position as per your requirement.
Try this.
#docked_div {
background-size: 100% auto;
height: 212px;
position: absolute;
right: 0;
width: 53px;
}
This will take the div to be on the right of the main div. Hope this helps.
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}
I have a simple webpage with a two divs in a container div.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container {
height: 50px;
width: 100%;
}
#left, #right {
float: left;
height: 100%;
line-height: 100%;
}
Both are side by side, don't need to expand with content because content doesn't fill the divs, but the divs need to have the same amount of padding and fill the #container div. I wasn't clear before, but both divs need to have same padding, but different widths. One will contain a name, and the other an e-mail address, so the second is much longer.
I can't get it so that the divs fill the width of the container div. There is a space after the #right div.
Also, everything is based on percentages, not a fixed layout, CSS only.
It seems simple, so can someone point me in the right direction?
You don't currently have a width set on the two floated elements. Adding one resolved everything:
#container {
overflow: hidden;
background: green;
}
#left, #right {
float: left;
box-sizing: border-box;
width: 50%;
padding: 5% 10%;
text-align: center;
}
#left { background: red }
#right { background: blue }
Fiddle: http://jsfiddle.net/u4G7c/1/
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container {
height: 50px;
width: 100%;
}
#left, #right {
float: left;
width:46%; padding:2%;
height: 96%;
line-height: 100%;
}
Without borders and padding, give the DIVs a width of 50%. If you need borders and padding, give them width of 50% and set box-sizing to border-box.
I made a few changes, but the most important was on #right removing float: left and then adding overflow: hidden.
See: http://jsfiddle.net/thirtydot/2AS58/
HTML:
<div id="container">
<div id="left">left</div>
<div id="right">right#sdfgsdfsdf.com</div>
</div>
CSS:
#container {
border: 1px solid red;
margin: 10px;
}
#left, #right {
padding: 10px;
height: 30px;
line-height: 30px;
border: 1px solid blue;
}
#left {
float: left;
}
#right {
overflow: hidden;
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.
I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #left and #right divs to have static sizes and non-repeating backgrounds. However, the #middle div should resize depending on the page size. How can I write my CSS so that the #middle div changes its with dynamically, apart from the width of the other two divs?
I think:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
<div id="header"><div class="left"><div class="right">
content...
</div></div></div>
<style type="text/css">
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }
</style>
something like this seems to work
#left
{
position:absolute;
top:0;
left:0;
width: 334px;
border:solid 1px red;
}
#middle
{
position:absolute;
top:0;
left:339px;
right:285px;
border:solid 1px green;
}
#right
{
position:absolute;
top:0;
right:0;
width: 280px;
border:solid 1px blue;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.