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.
Related
Sorry if the title is confusing. Basically, I'm working on a tumblr theme where I need three adjacent divs wrapped in a fixed-width container. None of their contents are fixed, so they all have variable widths. The middle div should always be centered to the container, while the divs to the left and right will always be "touching" the middle div, and, thus, move around as the middle div's width changes (the left and right s may be images, so text-align doesn't always work). Plus, I may also need to hide the left, right, or both the left and right divs.
Here's a conceptual image:
I can obtain this using flexboxes easily (JFiddle), but flex only has 86% global support.
This is the closest I could get without using flexboxes, but I can't get that middle div (with the text) centered to the title div, while preserving the relative positions of the two images on either side: JFiddle
* {
height: 100%;
position: relative;
}
body {
height: 200px;
}
/* just to get rid of scrollbar */
p {
margin: 0;
}
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
}
.container {
background: #abc;
float: left;
}
.lr {
transform: translate(0, -100%);
}
.left {
background: green;
float: left;
}
.left img {
transform: translate(-100%);
}
.center {
background: red;
display: inline-block;
z-index: 2;
}
.right {
background: blue;
float: right;
}
.right img {
transform: translate(100%);
}
.left img, .right img {
height: 100%;
}
<div class="title">
<div class="container">
<div class="center">CENTERCENTERCENTERCEN</div>
<div class="lr">
<div class="left">
<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
</div>
</div>
Other people have mentioned trying to display the title as a table, but that would require centering the middle cell to the whole row, and having the cells to the left and right take up the rest of the space, and I'm not sure if you can do that when their widths aren't fixed.
Anyone know of any other solutions?
If you can change your HTML then apply this:
First move the left and right elements inside center:
<div class="center">
CENTERCENTERCENTERCEN
<div class="left">
testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
Then on the CSS :
/*Keep the center container on the middle*/
.title {
text-align:center;
}
.center {
position:relative;
display:inline-block;
}
/*Position elements based on the relative center parent*/
.left {
position:absolute;
top:0;left:0;
transform:translateX(-100%)
}
.right {
position:absolute;
top:0;right:0;
transform:translateX(100%)
}
Check this DemoFiddle
Using position: absolute should help in this.
I changed your HTML to following:
<div class="title">
<div class="container">
<img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
<div class="center">CENTERCENTERCENTERCEN</div>
<img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
CSS
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
text-align: center;
}
.container {
background: #abc;
display: inline-block;
margin: 0 auto;
position: relative;
text-align: left;
}
.center {
background: red;
}
.left, .right {
position: absolute;
top: 0px;
}
.left {
right: 100%;
}
.right {
left: 100%;
}
Working Fiddle
Updated to show OP Update
No need for flex here, why not just use percentages? Float all the containers and put the percentages as relative to the sizes you want. (50% for the middle, 25% for the outside containers).
You can use the outside containers as wrappers so you can still use a border on the inner containers without messing up the sizing. Then just float the inner containers within the outside containers (if that makes sense). The example below just floats the inner p tags to the outer containers.
This makes it always hug the inner container, while keeping relative sizes and also keeping the middle centered.
Example below:
Fiddle
HTML
<div class="container">
<div class="flexa">
<div class="left">
<p>leftleft</p>
</div>
<div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
<div class="right">
<p>ri</p>
</div>
</div>
<div class="bottom">BOTTOMOMOM</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div {
background: #aaaaaa;
overflow: hidden;
}
p{
border: 1px solid black;
}
.container {
width: 500px;
/* for example */
margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
float:left;
}
.left p{
float:right;
}
.flexa div{
float:left;
}
.left {
width:25%;
}
.center {
width: 50%;
}
.right {
width:25%;
}
.bottom {
display: block;
margin: 0 auto;
text-align: center;
}
Possible duplicate didn't help
I know there are many answers about this topic but neither of them helped me and I spent days on
this problem.
90% of the answers and books give this background trick which didn't help me.
My code - Plunker
HTML
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Content</p>
</div>
CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Right now my layout looks like this:
And I want it to look like this:
I followed this guide offered in the possible duplicate and it didn't help
I think this is because I'm using floats and fluid layout.
How can I extend the columns while keeping the fluid layout and the float positioning.
I've updated your code. Check out it on Plunker.
At first try to not use absolute or relative positions, if there is no need of them.
The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.
Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.
And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.
Try something like this:
FIDDLE
Markup:
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
CSS
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
I'm trying for two sections to float aside of the main column on the right side. The sections should be of a fixed width and the main should be fluid. This is the closest I have come. Problem is that the main does not change its size. If it where one aside section I had used the holy grail, but that doesn't work either.
[edit]To clarify; the HTML cannot be changed (much). Left and right need to stay after main which is best for screen readers and seo. The asides are actually the left and right column if content is wide enough. So only specific widths get this layout I am trying to achieve.[/edit]
https://jsfiddle.net/TR2SD/1/
<div id="container">
<div id="main">
main contents<br>with some content
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
and the CSS:
#container {
border: 1px solid red;
width: 100%;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
position: relative;
width: 100%;
float: left;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:220px;
position: relative;
z-index:2;
}
For one sidebar, you can position in by accounting for its width using padding on the container and a margin on the main section:
.container {
padding-right: 200px; /* Matches sidebar width */
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.sidebar {
width: 200px;
margin-right: -200px; /* Matches sidebar width */
float: right;
}
For a left and right sidebar with a scaling center you can use a similar technique:
.container {
padding-right: 200px;
padding-left: 200px;
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.left-sidebar {
float: left;
width: 200px;
margin-left: -200px;
}
.right-sidebar {
float: left;
width: 200px;
margin-right: -200px;
}
.left-sidebar, .right-sidebar {
display: none;
}
Here's the final result on JSBin. You'll need to resize the page to see the different views.
Note that an auxiliary sidebar for small screens was used in the example above as it is inordinately difficult to use CSS to render elements out of DOM order.
I finally answered it by utilizing an inside element of the #main. What I need to check is compatibility of this fix. And what haapens to the backgrounds assigned to #main.
https://jsfiddle.net/TR2SD/5/
I added an "inside" element
<div id="container">
<div id="main">
<div class="inside">
main contents<br>with some content
</div>
</div>
<aside id="left">
left contents
</aside>
<aside id="right">
right contents
</aside>
</div>
And the css floats everything with some corrections.
#container {
border: 1px solid red;
width: 100%;
}
#main {
background-color: #f0f;
margin-left: -240px;
width: 100%;
float: left;
}
#main .inside {
margin-left: 240px;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: left;
width:240px;
}
In order to locate your divs as you are requiring you should:
Position divs left and right floating right
For the div you named left to be placed to the left of right , you must declare right before left and lastly main which does not require to be positioned relative
The container should declare a min width to prevent the break of the lay out.
So HTML should be a sort of...
<div id="container">
<aside id="right">
right contents
</aside>
<aside id="left">
left contents
</aside>
<div id="main">
main contents<br>with some content
</div>
</div>
And CSS should be
#container {
border: 1px solid red;
width: 100%;
min-width:600px;
}
#main {
border: 1px dotted #f0f;
margin: 0 -240px 0 0;
}
#left {
background-color: #0ff;
}
#right {
background-color: #ff0;
}
#left,#right {
float: right;
width:220px;
}
From here onwards, adjust as your will
A fiddle here
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.