So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>
Related
I found this jQuery animate script -> http://jsfiddle.net/steweb/dsHyf/ which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.
I want the .full to fill out 100% of the width and height of the .cell.
Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?
I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.
Plus I want to use this script multiple times on the same pages. What can I do?
HTML:
<div class="container">
<div class="sidebar">
<h1>Text</h1>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
</div>
CSS:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.full{
position:absolute;
width:100%;
height:100%;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
.container{
display: table;
width: 100%;
}
.cell{
display: table-cell;
}
div.container div:nth-child(1){
width: auto;
}
div.container div:nth-child(2), div.container div:nth-child(3){
width: 40%
}
JS:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
I have got the following code working fine on FF. As you can guess, I want the following two divs stays on one line without breaking when browser resize.
<div style="float: left; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
But as per usual, when I tested the page with IE 9, the right div was already below the left one.
Can someone pls help me out here, thanks,
Either add "float:right" in your second div or
add "width:XXpx" into your first div.
Wrap it with another div
<div>
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
</div>
you also float the other div
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
==========================================================>>>
UPDATE
HTML
<div class="marginRight"></div>
<div></div>
CSS
div {
float:left;
border:1px solid red;
width:45%;
height:100px;
}
.marginRight {margin-right: 10px;}
WORKING DEMO
it is working fine
if you want more configuring
<div style="display:table-row;">
<div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
<div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>
Use a container div and set the two divs to either % of total width or total px of the page.
#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}
<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>
Remember if you use margins and paddings you will need to adjust the percentages or pixels for it to line up next.
For example. If you add padding 1% to left div, it will push the right div down to second line since you are now at a total of 101% of the container divs width.
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.
Each column has a fixed width of 200px with a 20px margin.
The top-left box and the columns have variable height.
Like this
Tor Valamo kindly provided an answer to a similar question (that being elastic, this is fixed), but I cant centre the layout, as it uses position: absolute.
How can I do it? I know that using a table with colspan and rowspan the answer to this problem is trivial, but I would like to avoid table-based layout like the plague!
Not sure I understand exactly what you're asking, but something like this...?
<div style="float: left;">
<div style="width: 420px;">top</div>
<div style="width: 200px; float: left;">bottom left</div>
<div style="width: 200px; float: left;">bottom right(ish)</div>
<div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>
You can still use the layout that you linked to and have it be centered, despite the position: absolute. I've adapted it for you here (you'll have to tweak to add in the margins, but it works, I tested it:
<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid #000;
}
#outer {margin:0 auto; position:relative;width:800px;}
#left {right:50%;width:400px;}
#top_left {position:relative; width:400px;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%; width:200px;}
#bottom_left_right {left:50%; width:200px;}
#right {left:50%;}
#right_left {right:50%; width:200px;}
#right_right {left:50%; width:200px;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>