I'm trying a web page with 3 section together:
div A width:200px
div B full width
div C width:10px;
HTML:
<div class="main">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
CSS:
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:#F00;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
float:left;
}
.b{
height:500px;
background-color:#00F;
float:left;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
float:left;
}
But the div B not full screen!How to correct this?
You need to reorder your <div>. First <div class="a">, then <div class="c">, then <div class="b">:
<div class="main">
<div class="a">A</div>
<div class="c">C</div>
<div class="b">B</div>
</div>
As a next step, you will have to remove the float: left; from .b (making elements float removes the typical block level element behaviour of grabbing the available width) and change the float for .c to right.
The last step then will have to be that you will have to assign the width you want for all 3 to their container .main.
I think you will need some css lib like bootstrap etc or use media queries.
For fix wide the css will look like
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:green;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
display:inline-block;
float:left;
}
.b{
height:500px;
background-color:#0F0;
display:inline-block;
width:990px;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
display:inline-block;
float:right;
}
.b
{
background-color:#00F;
float:left;
height:500px;
min-width: 990px; /* 1200 -200-10*/
}
Related
Is it possible to put a 90 degree flip a div next to a normal horizontally?
In my example, I want the blue div ("some text") to be vertical and be next to the horizontal "bottom-right" div. Is it possible to do so while making it responsive? I don't want just the text to be flipped, I want any items I put inside that div to also be flipped.
https://jsfiddle.net/duah6svr/1/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
background:red;
width:80%;
}
.bottom{
width:100%;
height:70%;
background:green;
float:right;
}
.bottom-right{
float:left;
height:100%;
width:80%;
background:pink;
}
.vertical-invert{
width:20%;
height:100%;
background:blue;
}
<div class="big-div">
<div class="top">
</div>
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
You can use a flexbox and the writing-mode attribute. Here is a working fiddle demonstrating. In case you want to change the text orienation you can use something different for writin-mode as described here
Updated version: Bottom of the text is on the left side. The trick is to set the writing-mode to vertical-lr
HTML:
<div class="big-div">
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
background:gray;
}
.bottom{
width:100%;
height:70%;
display: flex;
flex-direction: row;
}
.bottom-right{
width:80%;
background:pink;
}
.vertical-invert{
width: 20%;
background:blue;
writing-mode: vertical-lr;
text-align: left;
}
I want these empty divs to have the same height as fluid div.
http://jsfiddle.net/QLdZs/
html:
<div id="container">
<div class="buffer"></div>
<div class="buffer"></div>
<div class="buffer"></div>
<div id="content">
this is content<br/>
lalala<br/>
lala<br/>
lala<br/>
lalalalala lala la<br/>
o sole mio<br/>
</div>
</div>
css:
#container {
overflow:hidden;
}
.buffer {
float:left;
background-color:red;
width:100px;
min-height:10px;
border-right:1px solid white;
}
#content {
overflow:hidden;
background-color:green;
}
I know I can make #container {position:relative;}, and then set .buffer {position:absolute;height:100%;} but I'll have to set positions for all these buffers seperately, and set margin to #content div. Sometimes I'll have two, three buffers, sometimes none. So this is not the best way of doing it.
Do you have any good idea how can I do this?
Check this article out, I think it's what you need:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I usually just used fixed heights, though.
Quoted from the article:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
And the CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}
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>
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/