I am looking to stack divs in 2 columns, like facebook timeline but I want to do it using pure CSS only. I currently have this but the margin is not correct on Content Four.
#container { width: 700px; background-color: green; }
.box {
display: inline-block;
width: 300px;
background-color: #cecece;
margin: 5px;
padding: 10px;
}
.odd { float: left; }
.even { float: right; }
The rule is that the divs will have equal widths, and should go to the shorter column when floating.
Is there a reliable pure CSS solution or do I have to resort to JavaScript?
You can try this
#container { width:700px; background-color: green; display:table; }
.box {
display:table-cell;
width: 300px;
background-color: #cecece;
margin: 5px;
padding: 10px;
}
Related
For the header of a website, I want to center an element and have to rows of links float against it from both sides. The rows are not the same length, so I can't just center the whole menu.
It's easier to see than to explain, so here's an image and a fiddle of the effect I want to achieve.
http://jsbin.com/katuroxi/11/edit
The fiddle however uses the new flexbox, which I would like to (if possible) avoid.
Is there a way to do this without them?
You can do it like this:
.parent {
display: table;
table-layout:fixed;
padding: 0;
font-size:0px;
width:100%;
}
ul {
padding: 0;
margin: 0;
}
.left, .right, .fix {
display:table-cell;
}
.left {
text-align: right;
}
li {
list-style: none;
display: inline-block;
border: 1px solid red;
font-size:16px;
}
.fix {
text-align: center;
border: 1px solid red;
width: 120px;
font-size:16px;
}
What this does is:
add display:table to the .parent and make it render with table-like logic and make it 100%.
add display:table-cell to .left, .right, .fix so it will render like a table cell. Because of this, each cell will take 33% of the table width.
add font-size:0px to the .parent to remove the white space between display:inline-block elements.
set the font-size back to the desired value in the elements where we have the text.
You could use all elements as display:inline; (or display:inline-block if you want some padding) and text-align:center; on the .parent
.parent {
padding: 0;
width: 100%;
text-align: center;
}
ul {
padding: 0;
margin: 0;
display: inline;
}
.left, .right, .fix {
display: inline;
text-align: center;
}
li, .fix {
list-style: none;
border: 1px solid red;
display: inline;
}
http://jsbin.com/katuroxi/12/edit
Problem
I have "boxes" that float left so that I can display them in a line until they need to wrap. This works well, but my coloured background doesn't shrink to the minimum, it expands to the maximum.
JSFiddle
http://jsfiddle.net/RLRh6/
(Expand and shrink the Result section to see the effect)
HTML
<div class="container">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
CSS
.container {
background: #fcc;
margin: 0 auto;
max-width: 300px;
}
.boxes {
background: #cfc;
overflow: hidden;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 2px;
}
What I Get
Note the extra green colour, right of the boxes:
Example 1
Example 2
What I Want
Example 1
Example 2
Question
Is it possible to have the green-background div (".boxes") shrink to the minimum possible size to display the boxes without Javascript? You should be able to shrink and expand the div freely and not see any green to the right of the boxes.
Working DEMO http://jsfiddle.net/RLRh6/56/
If you want to achieve this only with html, css, should use media queries.
CSS
.container {
margin: 0 auto;
min-width: 76px;
max-width: 228px;
}
#media only screen and (min-width: 76px) {
.boxes {
float:left;
background: #cfc;
width: 76px;
}
}
#media only screen and (min-width: 152px) {
.boxes {
float:left;
background: #cfc;
width: 152px;
}
}
#media only screen and (min-width: 228px) {
.boxes {
float:left;
background: #cfc;
width: 228px;
}
}
.boxes {
float:left;
background: #cfc;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 2px;
}
Remove the min-width from the .container and add display:inline-block;
also if you want to center the .container then wrap the .container with a div and apply text-align:center to it.
.container {
background: #fcc;
margin: 0 auto;
display:inline-block;
}
jsFiddle Link
your container will wrap if there's a clear 'break to next line'.
Here is a pen to see different test, just set via CSS how many per line.
3.2.1 is that what you want ?
http://codepen.io/gcyrillus/pen/gHwjz
.container {
background: #fcc;
margin: 0 auto;
max-width:300px;
}
.container.table {
display:table;
}
.boxes {
background: #cfc;
display:inline-block ;/* or float */
vertical-align:top;
}
.box {
border: 1px dashed blue ;
width: 70px;
height: 50px;
float:left;
margin: 2px;
}
/* ====== test */
.container {clear:left;margin:1em auto;}
.container.inline-block {
display:inline-block;
}
.container.table {
display:table;
}
.container.float {
float:right
}
section {
width:450px;
margin:auto;
padding:0.5em 1.5em;
background:#ddd;
overflow:hidden;
}
.container:before { /* see classes */
content:attr(class);
display:block;
position:absolute;
margin-top:-1.2em;
}
/* wrap to next-line */
.float .box:nth-child(1n) {
clear:left;
}
.inline-block .box:nth-child(4n) {
clear:left;
}
.table .box:nth-child(odd) {
clear:left;
}
I have done little bit changes in your css, check the jsFiddle link here if it works for you.
Followings are the css chagnes:
.container {
background: #fcc;
margin: 0 auto;
max-width: 300px;
}
.boxes {
background: #cfc;
overflow: hidden;
padding:2px;
}
.box {
border: 1px dashed blue;
width: 70px;
height: 50px;
float: left;
margin: 0 2px 2px 0;
}
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.
How would you make the main_content stretch to the header, footer, right and left side bar.
Just looking for a 3 column layout with header and footer. I've been searching and haven't found any examples that do this.
<style type="text/css">
#header
{
height:100px;
border: 1px solid blue;
}
#left_side_bar
{
border: 1px solid blue;
width: 100px;
float: left;
height: 300px;
}
#main_content
{
border: 1px solid green;
float: left;
width: ?;
height: ?;
}
#right_side_bar
{
border: 1px solid blue;
width:100px;
height: 300px;
float: right;
}
#footer
{
border: 1px solid blue;
clear:both;
height: 100px;
}
</style>
<div id="header"></div>
<div id="left_side_bar"></div>
<div id="main_content"></div>
<div id="right_side_bar"></div>
<div id="footer"></div>
Well, here is a demo with position:fixed, although there are plenty of sites out there which can generate the mark-up and CSS for you. For example the very nice CSS Layout Generator
CSS
#Header {
float: left;
clear: both;
width: 100%;
}
#Left_Side_Bar {
float: left;
width: 10%;
}
#Main_Content {
float: left;
width: 80%;
}
#Right_Side_Bar {
float: left;
width: 10%;
}
#Footer {
float: left;
clear: both;
width: 100%;
}
Here you can find example of most of the 3 column layouts (fixed, fluid, mixed...) -> CSS Layouts
I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/
the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.
Here is the css:
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#masthead {
}
#top_nav {
width: 700px;
background-color: #DDDDDD;
margin-right: auto;
margin-left: auto;
}
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#left_col {
width: 95px;
float: left;
background-color: #B79F63;
border-right: 5px solid #976F43;
}
#page_content {
width: 600px;
float: right;
background-color: #D2C388;
}
#footer {
clear: both;
width: 700px;
text-align: center;
background-color: #E0E0E0;
margin-right: auto;
margin-left: auto;
}
Thanks
One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://www.cssnewbie.com/equal-height-columns-with-jquery/