I am trying to understand how it works.
I made columns and put <hr> inside just for an illustration.
Here's what I have tried so far:
Row margin left and right -15px.
Columns padding left and right 15px.
Widths, same to bootstrap's.
Columns are floated left.
I don't understand why mine is not working? For example, 4 columns would only have 3 columns then the other one would go to the bottom. Widths are correct. I am a bit frustrated.
Edit:
HTML
<div class="row">
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
</div>
CSS
.row {
margin-left: -15px;
margin-right: -15px:
}
.column {
padding-left: 15px;
padding-right: 15px;
float:left;
width: 33.33333%
}
Yours doesn't work like Bootstrap because Bootstrap uses border-box sizing. To make yours work the same use..
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-left: -15px;
margin-right: -15px:
}
.column {
padding-left: 15px;
padding-right: 15px;
float: left;
width: 33.33333%
}
http://www.codeply.com/go/BnMCZvKZ5N
Not sure what you want to acomplish, but it seems like you want 3 colums?
Try this:
<div class="row">
<div class="col-md-4">
1 / 3
</div>
<div class="col-md-4">
2 / 3
</div>
<div class="col-md-4">
3 / 3
</div>
</div>
Little explenation:
col-md-12 is one column
so if you want 2 columns you do col-md-6 (twice, and always bewteen a row class)
and it works the same with everything else
try reading this:
http://getbootstrap.com/css/#grid
Related
Hi, I was wondering how can I achieve a grid as shown above. Perhaps you guys have some tricks? :) I've tried Masonry, but I don't think it's fit for this.
I'm also using Bootstrap, but it doesn't have to be Bootstrap. Maybe if i'd had some keywords I could Google it, but I have nooo idea what exactly to search for.
This can be done easily using nested flexboxes- created a demo for you.
Adjust height and width of wrapper to suit your needs.
Enjoy!
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
height: 250px;
}
div {
background: rgb(0, 140, 88);
}
.wrapper > div:first-child {
width: 50%;
}
.wrapper > div:last-child {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
.wrapper > div:last-child > div:first-child {
width: 100%;
height: 50%;
background: #2ba982;
}
.wrapper > div:last-child > div:last-child {
height: 50%;
display: flex;
}
.wrapper > div:last-child > div:last-child > div {
width: 50%;
height: 100%;
}
.wrapper > div:last-child > div:last-child > div:first-child {
background: #76c6ac;
}
.wrapper > div:last-child > div:last-child > div:last-child {
background: #bbe2d5;
}
<div class="wrapper">
<div></div>
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>
Yes, you can do this with Bootstrap.
The major element will be one row with 2 div's (50% each, soo col-md-6 for example). The div on the right will have 2 row on his own, each with 50% of the height of his parent element. The second row of this will have 2 columns himself, with col-md-6 again. Don't forget each time you have a row or a container, you should always consider the 12 columns system again!
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="row half-height">
<div class="col-md-12">
</div>
</div>
<div class="row half-height>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Not much time to do a jsfiddle, but I think it was clear
You would be looking at something similar to this (Note: This is just one of the many solutions available
Fiddle
What you do is you use the bootstraps grid system to create your shapes accordingly and you set the height of the left box (big box) to double the height of the smaller box
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color:green;height:600px;">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="background-color:blue;height:300px">
</div>
</div>
<div class="row">
<div class="col-md-6"style="background-color:yellow;height:300px"></div>
<div class="col-md-6"style="background-color:red;height:300px"></div>
</div>
</div>
</div>
</div>
As you can see in this code I have given the smaller voxes a height equal to half of the big box's height, the colors are just for visual representation and serve no function whatsoever, by using col-md-6 you can fit two columns in one row, which is what we need in your case, *Note, bootstrap has 12 columns* by using this we can safely assume that in the left box we need one div that's 12 columns wide in the first nested row (since we have two rows of smaller boxes we are using a nested row) and two boxes that are 6 columns wide in the second nested row.
Ofcourse in your case the inline style attributes will be moved to your style.css file
Hope this helps!
I want to create an HTML layout like http://vandelaydesign.com/blog/blog-promotion/best-twitter-practices-for-improving-visibility/ where the left most column is shown only on higher screen sizes, and the right most column has a fixed width of 345px.
With bootstrap 3, I have tried the following.
<div class="container">
<div class="row">
<!--left-->
<div class="col-sm-3">
</div>
<!--/left-->
<!--center-->
<div class="col-sm-6">
</div>
<!--/center-->
<!--right-->
<div class="col-sm-3">
</div>
<!--/right-->
</div>
</div>
<!-- /.container -->
But it is creating stacked columns. Any help will be great.
Until we get widespread CSS flexbox support, I like display: table-cell for fluid horizontal layouts. Take a look at this quick sample: http://jsfiddle.net/zn6z3/ You would use media queries to hide the left column at a certain width, and the middle column would just expand to fill the space that was lost.
The great thing about table-cell is that you can define fixed widths on some columns and no explicit widths on the others. Columns without widths defined will expand to fill the space of the table. This is a huge advantage over float-based layouts.
Here's my sample HTML & CSS
<div id="page">
<div class="col" id="left">Content</div>
<div class="col" id="middle">Content</div>
<div class="col" id="right">Content</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#page {
display: table;
width: 100%;
}
#page .col {
display: table-cell;
vertical-align: top;
padding: 20px;
}
#left {
width: 150px;
background: #777
}
#middle {
width: auto;
background: #aaa;
}
#right {
width: 345px;
background: #ccc;
}
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center">
<font size="+1">
<em class="heading_description">15 pence per slot</em>
</font>
<img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>
and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
I'm surprised that nobody gave CSS table layout as a solution:
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Works in IE8+
Check out a JSFiddle Demo
See my code
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>
I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).
.parent {
display: flex;
flex-direction:row;
}
.column {
flex: 1 1 0px;
border: 1px solid black;
}
<div class="parent">
<div class="column">Column 1</div>
<div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
<div class="column">Column 3</div>
</div>
here are two samples: http://jsfiddle.net/H5q5h/1/
one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.
the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.
Old topic but maybe someone will like it.
fiddle link http://jsfiddle.net/74ShU/
<div class="mainDIV">
<div class="leftDIV"></div>
<div class="middleDIV"></div>
<div class="rightDIV"></div>
</div>
and css
.mainDIV{
position:relative;
background:yellow;
width:100%;
min-width:315px;
}
.leftDIV{
position:absolute;
top:0px;
left:0px;
height:50px;
width:100px;
background:red;
}
.middleDIV{
height:50px;
width:100px;
background:blue;
margin:0px auto;
}
.rightDIV{
position:absolute;
top:0px;
right:0px;
height:50px;
width:100px;
background:green;
}
2019 answer:
Using CSS grid:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
Just add float left property on all the divs you want to make appear in a row other than last one. here is example
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
This is easier and gives purpose to the never used unordered/ordered list tags.
In your CSS add:
li{float: left;} //Sets float left property globally for all li tags.
Then add in your HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now watch it all line up perfectly! No more arguing over tables vs divs!
Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:
<div class="row">
<div class="four columns">
</div>
<div class="four columns">
</div>
<div class="four columns">
</div>
</div>
This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.
Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.
The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.
You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php
If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:
.row:after {
content: "";
clear: both;
display: table;
}
.four.column {
float: left;
width: 33%;
}
If you really specifically want a left center and right columns then use code like this:
CSS:
.row:after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
width: 100px;
}
.center {
margin: 0 auto;
width: 100px;
}
.right {
float: right;
width: 100px;
}
HTML:
<div class="row">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Put the divisions in 'td' tag. That's it done.
Another possible solution:
<div>
<h2 align="center">
San Andreas: Multiplayer
</h2>
<div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
</div>
</div>
Also helpful as well.
Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/
I am trying to figure out how to create 3 divs and have them lineup in the same row.
Having 1st and 3rd one fixed width at 100px and have the 2nd (middle) one audo adjust its width in case of browser resize.
<div>
<div id="d1"> content 1</div>
<div id="d2"> content 2</div>
<div id="d3"> content 3</div>
</div>
thanks,
You have tp use floats to align the left and right frame. But for this you have to reorder the divs as shown below, and set the margins for the middle div.
<style type="text/css">
#d1 {
float: left;
}
#d2 {
float: right;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
}
</style>
<div>
<div id="d1"> content 1</div>
<div id="d2"> content 2</div>
<div id="d3"> content 3</div>
</div>
Edit
Thanks to Leniel Macaferi for pointing out an error. The correct order of the divs has to be floating divs first, then non floating divs. Therefore I corrected the code (exchanged div d2 and div d3).
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
Strike that, many extra divs to ensure all columns are equal height. This may be what you're looking for. All explained in this excellent article: http://www.alistapart.com/articles/holygrail
Div is a block-level element, so its a nice option to handle with the help of its Display Property.
<div id="d1" style="display:inline-block; width:100px;">content1</div>
<div id="d2" style="display:inline">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>
Just putting this out there as a modern, clean solution: use calc.
Fiddle: http://jsfiddle.net/bg7KS/
#d2 {
width: 200px; /* fallback older browsers */
width: -webkit-calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: calc(100% - 200px);
}
nvm this is old, i was gonna post what worked for me
<style type="text/css">
#d1 {
float: left;
margin-left: 50px;
}
#d2 {
float: center;
margin-right: 5px;
}
#d3 {
float: left;
margin-right: 5px;
}
</style>
<div>
<div id="d1"> content 1</div>
<div id="d3"> content 3</div>
<div id="d2"> content 2</div>
</div>
I know how to make 2 divs float side by side, simply float one to the left and the other to the right.
But how to do this with 3 divs or should I just use tables for this purpose?
Just give them a width and float: left;, here's an example:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
The modern way is to use the CSS flexbox, see support tables.
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
You can also use CSS grid, see support tables.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
It is same way as you do for the two divs, just float the third one to left or right too.
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
float them all left
make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap
<br style="clear: left;" />
that code that someone posted up there, it did the trick!!!
when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa!! :)
Float all three divs to the left. Like here:
.first-div {
width:370px;
height:150px;
float:left;
background-color:pink;
}
.second-div {
width:370px;
height:150px;
float:left;
background-color:blue;
}
.third-div {
width:370px;
height:150px;
float:left;
background-color:purple;
}
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
the advantage of this way is you can set each column width independant of the other as long as you keep it under 100%, if you use 3 x 30% the remaining 10% is split as a 5% divider space between the collumns
I usually just float the first to the left, the second to the right. The third automatically aligns between them then.
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
you can float: left for all of them and set the width to 33.333%
try to add "display: block" to the style
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
I didn't see the bootstrap answer, so for what's it's worth:
<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />
let Bootstrap figure out the percentages.
I like to clear both, just in case.
I prefer this method, floats are poorly supported in older versions of IE (really?...)
.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }
UPDATED :
Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this:
jQuery(document).ready(function(){
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
});
Not the most amazing thing in the world, but at least doesn't break on older IEs.
But does it work in Chrome?
Float each div and set clear;both for the row. No need to set widths if you dont want to. Works in Chrome 41,Firefox 37, IE 11
Click for JS Fiddle
HTML
<div class="stack">
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
</div>
CSS
.stack .row {
clear:both;
}
.stack .row .col {
float:left;
border:1px solid;
}
Here's how I managed to do something similar to this inside a <footer> element:
<div class="content-wrapper">
<div style="float:left">
<p>© 2012 - #DateTime.Now.Year #Localization.ClientName</p>
</div>
<div style="float:right">
<p>#Localization.DevelopedBy Leniel Macaferi</p>
</div>
<div style="text-align:center;">
<p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ #Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
</div>
</div>
CSS:
.content-wrapper
{
margin: 0 auto;
max-width: 1216px;
}
#Leniel this method is good but you need to add width to all the floating div's. I would say make them equal width or assign fixed width. Something like
.content-wrapper > div { width:33.3%; }
you may assign class names to each div rather than adding inline style, which is not a good practice.
Be sure to use a clearfix div or clear div to avoid following content remains below these div's.
You can find details of how to use clearfix div here
display: table;If text needs to appearas if on the same line
In other words; if the vertical alignment of text in each <div> needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversial table styling:
.container {display: table;}
div {display: table-cell;}
This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:
div.csl-bib-body {}
div.csl-entry {
margin-top: 1rem;
display: table;
}
div.csl-left-margin {
display: table-cell;
}
div.csl-right-inline {
padding-left: 1ex;
display: table-cell;
}
The citation number div and the citation data div are now shown at the exact same height.