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>
Related
I've been searching for similar questions to these, but I couldn't find one, so I'm exposing my problem, hoping you could tell me what am I doing wrong and how to correct it.
I'm trying the accomplish the following scenario: two divs, side by side, using 100% of height and width, in which the left one can be scrollable. The right one has a few divs on top of each other, and the last one should have its contents scrollable too.
A picture can better describe the scenario:
The blue divs are the ones that can be scrollable, but the height of red ones is unknown.
I was able to partially accomplish this, but the problem is that the content of the last div is pulled down from the view in the same proportion as the height sum of the red divs, so when the user scrolls that blue div he won't be able to view the full content of it.
What can I do to solve this?
I also got a fiddle where this behavior can be reproduced: http://jsfiddle.net/d3dNG/3/
Thanks for any feedback on this.
HTML:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}
Since you will not know what the size of #header1 you can go about this by using javascript or jQuery.
(Make sure to only use ids once on your page since they are unique, #header1 is used 3 times)
The html I changed:
<div class="headParent">
<div class="header1">Header 1</div>
<div class="header1">Header 2</div>
<div class="header1">Header 3</div>
</div>
The little jQuery I wrote:
function rightSize() {
var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`
$('#rightContent').css({height: mH});
}
rightSize();
Finally, a fiddle: Demo
Even once there is more of the .header1 the #rightContent will still adapt correctly to fit the content.
Try this:
HTML
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="rightOne">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
</div>
<div id="rightTwo">
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS
#rightOne {
height: 16%;
width: 100%;
}
#rightTwo {
height: 84%;
width: 100%;
}
I've updated your fiddle: http://jsfiddle.net/d3dNG/4/
I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman
You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.
Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.
I need inline DIVs to be spaced equally betweenn each other, and additionally between border and first (or last) DIV in the row.
I use solution found on Fluid width with equally spaced DIVs. It gives me equal spacing between DIVs, but left DIV sticks to the left border, and right DIV sticks to the right. I'd like it to be equally spaced from the borders as they are from each other.
UPDATE:
content DIVs are being created dynamically by Django, so I cannot say how many of them will be there in the line (between 1 and 4).
How can I create additional space on sides which will be equal to distance between DIVs?
Here is html:
<div class="container">
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
You could use box layout and padding of a certain percentage, like this (I just used 10% padding but you can adjust to suit your needs):
http://jsfiddle.net/XXPwW/2/
And right after asking the question, I've figured out the answer (how ironic?). I'll share it in case someone needs it.
What I've done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:
HTML:
<div class="container">
<div class="spacer"></div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="content">
<canvas width="130" height="130"></canvas>
</div>
<div class="spacer"></div>
</div>
and css:
div.container {
width: 100%;
text-align: justify;
}
div.content {
display: inline-block;
width: 20%;
margin: 0 auto;
}
div.container:after {
content: "";
width: 100%;
display: inline-block;
}
div.spacer {
display: inline-block;
width: 0;
}
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
you can use..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
Just add overflow:auto; to parent div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Working Demo
I guess your elements on the page messes up because you don't clear out your floats, check this out
Demo
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
There can also be a solution by having both float to left.
Try this out:
Working Demo
P.S. This is just an improvement of Ankit's Answer
Check out this fiddle:
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
.wrap {
width: 100%;
overflow:auto;
}
.fleft {
float:left;
width: 33%;
background:lightblue;
height: 400px;
}
.fcenter{
float:left;
width: 33%;
background:lightgreen;
height:400px;
margin-left:0.25%;
}
.fright {
float: right;
background:pink;
height: 400px;
width: 33.5%;
}
<div class="wrap">
<!--Updated on 10/8/2016; fixed center alignment percentage-->
<div class="fleft">Left</div>
<div class="fcenter">Center</div>
<div class="fright">Right</div>
</div>
This uses the CSS float property for left, right, and center alignments of divs on a page.
Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves.
Check out the following code snippet:
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient() function accepts three arguments
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
skyblue color has been used to represent the right half of the split screen.
Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen.
Hope this helps. :)
Happy Coding!
Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
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.