Just how can I make my page look like this:
When the left, and right (the upper divs
When A and B's height is unknown (well, the one who has most content will decide on how down below C is)
Thanks in advance
I would make the sections percentages, that way you get these proportions no matter what screen size the user has.
CSS
#sectionA
{
float:left;
width: 20%;
}
#sectionB
{
float:left;
width: 80%;
}
#sectionB
{
clear:both;
width: 100%;
}
HTML
<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>
http://jsfiddle.net/AHk78/
HTML
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
CSS
#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }
CSS:
#divA
{
float:left;
width: <width of div A>;
}
#divB
{
float:left;
width: <width of div B>;
}
#divC
{
clear:both;
}
HTML:
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
You can make it inline with following example for right alignment:
<div style="width:30%;float:right"><!--write your required tags--></div>
Here width and float varies depending on the requirement
Something like this:
A
float: left
B
float: left;
C
clear: both;
Hi you can make this simply as like this
Css
#left {
width:100px;
min-height: 300px;
background:red;
float:left;
}
#right {
min-height:200px;
background:blue;
float:left;
width:400px;
}
#bottom{
height:200px;
background:green;
clear:both;
}
HTML
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/
Related
I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.
This is my code, and i don't know how to solved the problem.
https://jsfiddle.net/x0qqtr2y/
<div id="main>
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
#main {
width:100%;
background:gray;
display:table;
position:relative;
}
.cell1 {
width:auto;
height:auto;
display:table-cell;
background:red;
float:left;
}
.cell2 {
width:auto;
height:auto;
display:table-cell;
float:left;
background:blue;
}
use display:flex; on the parent element example below
CSS
#main {
width:100%;
display:flex;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
HTML on your main make sure you close the quote marks
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
To learn more about flex use the link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would try this CSS, worked when I tried it in your Fiddle:
#main {
width:100%;
background:gray;
position:relative;
}
#main div {
display: inline;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
Hi Because u miss (") id="main" below code working fine check it
CSS
#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {
float:left;
background:red;
}
Html
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>
</div>
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.
The easiest solution would be to just wrap the 3 div Elements in a container, like this:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
And then just make the child elements display: table-cell and the parent display: table and width: 100%.
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.
Demo: http://jsfiddle.net/eMbV7/11/
S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.
Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}
Demo: http://jsfiddle.net/eMbV7/9/
Use this code, I have wrapped all div in a container div.
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
& css
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
Here is jsFiddle link DEMO
Is that possible to do that only with HTML and CSS? Of cource, screen width can be various.
Yes you can do this with display:table property. write like this:
.parent{
width:100%;
display:table;
}
.parent div{
display:table-cell
}
.middle{
width:300px;
background:red;
}
.left{
background:green;
}
.right{
background:yellow;
}
Check this http://jsfiddle.net/QUVeq/
You can do it like in that example
http://jsfiddle.net/HCFpE/
add the width: auto; to your #left and #right css
<style type="text/css">
#wrapper{
width:100%;
float:left;
}
#left{
width:20%;
float:left;
}
#center{
width:60%;
margin:0 auto;
}
#right{
width:20%;
float:right;
}
</style>
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>