Whats the best way in order to style with css 3 div in this way:
Div 1 and 2 (same width) one up and one down on the left side and div 3 on the right side.
something like:
div1 { height: 200px; width:400px }
div2 { height: 600px; width:400px }
div3 { height: 800px; width:600px }
The best way is to first take two divs one should be to the left side and the other should be to the right side, the left one should have two more divs inside it. for example:
/**** CSS FILE ****/
.left{
float:left;
}
.right{
float:right;
}
.div1{
width:400px;
height:200px;
}
.div2{
width:400px;
height:600px;
}
.div3{
width:600px;
height:800px;
}
<!-- HTML File -->
<div class="left">
<div class="div1"> <!-- My div1 --> div1 </div>
<div class="div2"> <!-- My div2 --> div2 </div>
</div>
<div class="right">
<div class="div3"> <!-- My div3 --> div3 </div>
</div>
You could use reusable class:
<div class="h200 w400">
</div>
<div class="h600 w400">
</div>
<div class="h800 w600">
</div>
and CSS
.h200{
height:200px;
}
.h600 {
height:600px
}
.h800 {
height:800px;
}
.w400 {
width:400px;
}
.w600 {
width:600px
}
If you build your CSS with SASS (or similar) then this can be easily produced.
Related
I'm using bootstrap and my site is a responsive site.
In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).
My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.
html:
<div class = "row">
<div class = "col-md-8 classA">
<div class="classB">
<div class="classC">
<div class="classD"></div>
<div class="classD"></div>
</div>
</div>
</div>
<div class="col-md-4 classA">
<div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>
css:
.classA{
width: 300px;
min-height:100px;
}
.classB {
position:absolute;
width: 100%;
}
.classD{
position: absolute;
}
#media only screen and (min-width : 1224px) {
.classC{
width: 75%; /*responsiveness is based on the width here*/
height: auto; /*I think this is where the issue is?*/
}
}
A sample Fiddle
This is how it is at the moment (based on the responsive tab height):
This is what I expect it to be (to be based on the dynamic content height):
Basically if you are using jquery the answer will be the following:
Working example: Bootply Link
HTML
<div class="row" id="thedivs">
<div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
<div id="C">CCCCCC</div>
BBBB<br>
bbbbbbdsbdbsdbsbdbsbsd
</div>
<div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
<div id="A">AAAAA</div>
DDD
</div>
</div>
CSS
#A{
background-color: orange;
}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
height:inherit;
}
#thedivs{
height:100%;
}
Use JQuery to find height of parent and set the child's height to parent's height
Javascript
$(function() {
$('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});
for row you should use relative after that you can achieve it
Example
HTML
<div class="row">
<div class="aclass">A</div>
<div class="bclass">b</div>
</div>
CSS
.row{
position:relative;
max-width:600px;
background-color:#00ff00;
}
.aclass{
float:left;
width:48%;
height:580px;
background-color:#ff0000;
}
.bclass{
position:absolute;
width:48%;
right:0;
top:0
background-color:#0000ff;
}
I want to expand header and footer to 100% with the variable middle content width.
you can find the source at http://jsfiddle.net/9dWcZ/
HTML:
<div class="header">
this is header
</div>
<div class="content">
this is content
</div>
<div class="footer">
this is footer
</div>
CSS:
.header, .footer {
width:100%;
background:#999;
height:200px;
position:relative;
float:left;
clear:both;
display:block;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
float:left;
}
I don't want fixed header and no change in structure..
Please help..
thanks,
You can achieve this layout as follows.
You need to add a .wrapper element, this is essential:
<div class="wrapper">
<div class="header">this is header</div>
<div class="content">this is content</div>
<div class="footer">this is footer</div>
</div>
For the CSS:
.wrapper {
display: table;
}
.header, .footer {
width:100%;
background:#999;
height:200px;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
}
The key is to apply display: table to the .wrapper block.
See demo at: http://jsfiddle.net/audetwebdesign/7jxLC/
So you want to expand it starting from the middle point?
If that's what you want you can use:
margin-left:auto;
margin-right:auto;
It will start to grow in width from the center then.
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
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}
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>