In this sample, is there any way to align the "sidebar" div to the left so it sticks to "main" div, without setting margin or position manually?
<div id="wrapper" style="width:1000px;">
<div id="sidebar" style="width:20px; float:right;">Sidebar</div>
<div id="main" style="width:500px; margin:auto;">Main</div>
</div>
You could make both the main and sidebar div float to one side, and center the whole thing by making wrapper tighter and giving the wrapper auto margins. The CSS:
#wrapper {
width: 525px;
margin: auto;
}
#sidebar {
width: 20px;
float: right;
border: thin solid red;
}
#main {
width: 500px;
border: thin solid black;
float: right;
}
You can see the results here, http://jsfiddle.net/BkFgX/
Related
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
I have the following HTML code:
<div class="main">
<div class="container">
<div class="contents">
Some funny stuff in here
</div>
</div>
</div>
With the following CSS:
.main {
overflow: auto;
width: 200px;
}
.container {
border: 1px solid black;
}
.contents {
width: 300px;
}
This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):
main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
So, as contents div is 300px wide, it scrolls horizontally.
So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.
How come? I want it to be as wide as its contents (300px), how can I achieve that?
You just need to make you container float
.container {
border: 1px solid black;
float: left;
}
Float will automatically adjust your outer div to inner div width.
You need to slightly adjust your CSS. This will work:
.main {
overflow: auto;
width: 200px;
float: left;
}
.container {
border: 1px solid black;
float: left;
}
.contents {
width: 300px;
float: left;
}
Actually you should add the overflow: auto in container css not main css
How do I implement this layout (which is build using a table) with DIVs?
Basically I want to have two divs on the same line: Div1 and Div2. Div1 should be aligned to the left, Div2 – to the right. Div2 has also minimal width being set. When the width is not enough for both of them then Div1 one must wrap its content giving space to Div2. Whatever I have tried the Div2 always was moved under the Div1 before the content of Div1 was wrapped.
So I came up with solution made with a table. How to build same layout using DIVs?
Solution with a table:
<!DOCTYPE html>
<html>
<head>
<style>
#table {
width: 100%;
word-wrap: break-word;
}
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td id="div1">This text should wrap when window is made smaller.
<td id="div2">This takes 30% but not less than 250px;
</table>
</body>
</html>
HTML:
<div id="wrapper">
<div id="left"></div>
</div id="right"></div>
</div>
CSS:
#wrapper {
width: 100%;
float: left;
}
#left {
border: 1px solid red;
float: left;
}
#right {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
float: left;
}
Didn't test it, but it shall work.
Regards.
Is this something you were looking for? http://jsfiddle.net/fFkNW/3/
I changed the markup to use divs and updated the CSS to use floats
If you make the window smaller, you can see the red box start to wrap around the green box.
HTML
<div id="div2">This takes 30% but not less than 250px.</div>
<div id="div1">This text should wrap when window is made smaller.</div>
CSS
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
float: right;
border: 1px solid green;
}
Try taking a look at CSS box-flex.
One of the most high fidelity ways to do this would be to simply use divs displayed as a table:
#table {
width: 100%;
word-wrap: break-word;
display: table;
}
#table > div {
display: table-row;
}
#div1, #div2 {
display: table-cell;
}
You can see here that it looks exactly the same.
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
this may looks like the usual how to center a float question but the reason i need to center a float div is because other div container is also having a float property. I have set an height auto to determine the height depend on the object inside the wrapper div, within the wrapper div there is 2 float div to make it side by side. However if i did not specify a float on the wrapper the wrapper div would only show 1 staight line(not wrapping anything)
div.wrapper{
width: 1000px;
height: auto;
margin-top: 30px;
float: left;
border:1px solid gray;
}
div.leftcontainer{
width: 200px;
height: auto;
margin-top: 10px;
margin-left: 10px;
border:1px solid gray;
float: left;
}
div.right container{
width: 750px;
height: auto;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
border:1px solid gray;
float: right;
}
And this is my html code
<div class ="wrapper">
<div class ="leftcontainer">
some options
</div>
<div class = "rightcontainer">
some options
</div>
<div class = "rightcontainer">
some options
</div>
</div>
So how do i make my wrapper div centered Without removing the float or other way to do achieve this? Thanks
With all of the contents of .wrapper floating, you need to clear them.
Remove the float on .wrapper and add <div style="clear:both;"></div> before you close the .wrapper div.
You should then be able to add:
div.wrapper {
/* ... */
position:relative;
margin:0 auto;
}
And your wrapper will be centered.