I've been using bootstrap for quite a while now and I'm facing this problem for the first time. I really don't know how to do this. I have found many people suggesting to just remove padding-left on the first-child element and the last one. I also tried this way at first but then I realized that it couldn't work, since the .col class has the box-sizing: border-box; property which makes the div to have padding included in the width. (Which is obviously necessary if you want a clean layout using width: 25%;).
So, if you remove these padding on the left, the first and last div are going to be 15px larger, which breaks the layout... I want every col div to have exactly the same width, I want them to fit 100% of the row and have no padding left or right. Is there a class that I'm not aware of in bootstrap?
Is it possible while keeping the Bootstrap 3 templating system?
Code example:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
I finaly found a way around it by creating my own class, that I believe respect the way bootstrap made their layouting system. Here was the best and minimal way to do it:
CSS
.layout-no-gutter-around.is-4-columns > .col-md-3{
margin: 0 5px;
}
.layout-no-gutter-around.is-4-columns > .col-md-3:first-child{
margin-left: 0;
padding-left: 0;
width: calc(25% - 15px);
}
.layout-no-gutter-around.is-4-columns > .col-md-3:last-child{
margin-right: 0;
padding-right: 0;
width: calc(25% - 15px);
}
HTML
<div class="row layout-no-gutter-around is-4-colums">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
This way, I achieve exactly what I want, it's reusable and respect the Twitter's Bootstrap thinking (I believe). Thanks to Deja Vu who leaded me to the calc thiking, I believe it's a good way to achieve this. But you cannot put 15 margin left on the first child and right on the last child since that would still create a gutter around but using the margin.
I wasn't able to solve your problem but I have 2 ideas and maybe it will lead you to the solution.
Replace paddings with margins
html
<div class="row" id="optionOne">
<div class="col-md-3">first child</div>
<div class="col-md-3">child</div>
<div class="col-md-3">child</div>
<div class="col-md-3">last child</div>
</div>
css
#optionOne > div:first-child {
background-color: red; /* for display purposes only */
padding-left: 0px;
margin-left: 15px;
}
#optionOne > div:last-child {
background-color: yellow; /* for display purposes only */
padding-right: 0px;
margin-right: 15px;
}
Not sure if that would satisfy your design requirements.
recalc width
css
#media (min-width: 992px) {
#optionTwo > div:first-child {
background-color: green; /* for display purposes only */
padding-left: 0px;
}
#optionTwo > div:last-child {
background-color: grey; /* for display purposes only */
padding-right: 0px;
}
#optionTwo > div:not(:first-child):not(:last-child) {
background-color: blue; /* for display purposes only */
width: calc(25% + 15px);
}
}
The problem I faced was - in both cases last child falls onto the separate row:
fiddle.
Hope this will give you some food-for-thought.
I could not comment on Yann Chabot's post, but as an extension on it, I would recommend to use escape values. If you don't use this, Chrome recalculates the width to 10% instead of the correct width.
CSS
width: calc(~"25% - 15px");
Related
I'm building a responsive site. The basic version has 2 columns, each column features a few boxes:
The 1 column layout shold look like this:
A naive approach for the one column version would be to place everything from second column under column one...but I can't do that. I need to be able to pick boxes from both columns and place them in custom order.
The only way I can think of is via box duplication and hiding for desktop/mobile. Do you have any suggestions?
Thanks, Michal
UPDATE: Since this seems to be Isotope (and similar libraries related), I've created a new post here: Reordering boxes with Isotope
This is very nearly possible with some custom CSS. Unfortunately Bootstrap's default grid won't cater to your needs because items in either column have different heights.
Here's a basic example on JSBin (resize the output pane to see the elements stack).
There's a lot of custom CSS here which is unfortunate, but it works.
.col-right, .col-left {
width: 50%;
padding: 15px;
margin-bottom: 10px;
}
.col-left {
float: left;
clear: left;
height: 300px;
background: teal;
}
.col-right {
float: right;
clear: right;
height: 200px;
background: orange;
}
#media (max-width: 767px) {
.col-left, .col-right {
float: none;
width: auto;
}
}
I've added a simple breakpoint at 767px for demonstration. If you're using Bootstrap's LESS, you'll want to replace this with #screen-xs-max.
HTML
<div class="row">
<div class="col-left">A</div>
<div class="col-right">D</div>
<div class="col-left">B</div>
<div class="col-right">E</div>
<div class="col-right">F</div>
<div class="col-left">C</div>
<div class="col-right">G</div>
</div>
This works by using float: left or float: right for the left/right columns and clearing only the float for that column. It's not perfect, but it's the closest you're going to get without using a JavaScript library like Masonry.
Sounds like you should have a look into Isotope, seems to me it could help with what you are trying to achieve.
http://isotope.metafizzy.co
You could use Isotope and set up a one column layout.
You could also use Isotopes sorting to customise the order of your boxes on mobile.
http://isotope.metafizzy.co/sorting.html
Try this one?
<div style="float:left; width:50%; background: rgb(121, 82, 0);">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<div style="float:left; width:50%; background: rgb(0, 0, 255);">
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
</div>
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
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.
I,ve been trying to do this without much success.
How can I, using yui-grids make a template like yui-t1 (the one with a sidebar of 160px in the left), but with also a sidebar to the right of the same width?
The center column should be liquid...
You could try this liquid layout instead?
You can adapt and extend this example. Here's the HTML for 200px fixed / fluid content / layout preset column:
<div id="bd">
<div id="yui-main">
<div class="yui-b yui-b1">
<div class="yui-u-main">
<div class="yui-u">
<p>Main column: fluid width</p>
</div>
</div>
<div class="yui-u">
<p>Left column: 200px fixed</b>
</div>
</div>
</div>
<div class="yui-b">
<p>Third column: fixed width, follows template preset.</p>
</div>
</div>
CSS is simple as:
.yui-b1 .yui-u-main {
float: left;
width: 100%;
}
.yui-b1 .yui-u {
float: left;
/* Width of left column */
width: 200px;
margin-left: -100%;
}
.yui-b1 .yui-u-main .yui-u {
float: none;
width: auto;
/* Width of left column + 13px margin (default YUI margin) */
margin-left: 213px;
}
According to this page, a 180px-wide right sidebar has the default class yui-t4. I assume you could go into the CSS and change this pixel value to 160.
You chose Matthew's answer but he didn't answer your question. Though he may have solved your problem, someone reading this question in the future may still want to know the answer. This sort of thing, seems to me,discourages some from giving or developing an answer & would compel someone else to repeat this question.
Have you tried using the YUI grids layout http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html
but then adding an extra class on to the 2nd yui-u called .main or a class of .last on to the 3rd yui-u.
You could add the below overwriting style of
.yui-gb .yui-u {
width: 19%;
}
.yui-gb .main {
width: 59%;
}
to get 3 cols with widths 19/59/19
That any use to you?
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)