test case http://codepen.io/anon/pen/hFumw.
Works fine in all browsers except chrome. In chrome width of .container is calculated like .child.one elements are not floated. Is there any way to fix this behaviour?
HTML:
<div class="container">
<div class="header">
header
</div>
<div class="child one">
</div>
<div class="child one">
</div>
<div class="child one">
</div>
</div>
CSS:
.container {
background:red;
padding:10px;
display: inline-block;
overflow:hidden;
.child {
width:100px;
height: 100px;
background: green;
float:left;
clear:left;
border: 1px solid blue;
}
.one {
float: left;
clear:left;
background:yellow;
}
.header {
background:blue;
}
}
UPD:
.header {
float: left;
width: 100%;
}
is not acceptable in my particular case.
Following CSS seems to work fine in Chrome and FF. See header declaration.
body {
text-align: center;
}
.container {
margin-left:auto;
margin-right:auto;
background:red;
padding:10px;
display: inline-block;
overflow:hidden;
.child {
width:100px;
height: 100px;
background: green;
float:left;
clear:left;
border: 1px solid blue;
}
.one {
float: left;
clear:left;
background:yellow;
}
.two {
float: right;
margin-left:0px;
clear: right;
}
.header {
background:blue;
display:block;
float:left;
width:100%;
}
}
Try adding this css to .header
clear:both;
float:left;
width:100%
Related
Here is my HTML :
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Here is my CSS :
#container { height:auto; width:100%; background:orange; float:left; }
#red { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green { height:300px; width:100%; background:green; }
Here is a sample : https://jsfiddle.net/cc5xL660/
As it is in the jsfiddle, the #red div is invisible. I'm looking for a way to make the #red div visible without a specific height dimension. Of course, I could give a height:300px to the #red div but the #green div is supposed to be dynamic. I would like the #red div to have the same height.
You have to give
position: relative to #container
position: absolute to #red
Your JSFiddle edited: https://jsfiddle.net/cc5xL660/4/
You can use display:flex to do that. Have a look at here
#container {
height: auto;
width: 100%;
background: orange;
float: left;
display:flex;
flex-direction:row;
align-items:stretch;
}
#red {
/*height: 100%;*/
width: 200px;
background: red;
float: left;
position: relative;
}
#yellow {
/*height: 100%;
width: calc(100% - 210px);*/
background: yellow;
float: right;
position: relative;
padding: 5px;
flex:1 0;
}
#green {
height: 300px;
width: 100%;
background: green;
}
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Fiddle
In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>
If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)
i tried some codes but, no works anything.
would like make this with css, thanks =)
this code i tried, but doesn't work.
#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
i don{t know why this doesnt work.
A simple solution with no floats:
#main {
width: 200px; /* adjust as needed */
font-size: 0;
}
div div {
display: inline-block;
height: 60px; /* adjust as needed */
width: 100%;
box-shadow: inset 0 0 4px #000; /* cosmetics only */
background: #eee; /* cosmetics only */
}
div.h {
width: 50%;
}
<div id="main">
<div class="h"></div>
<div class="h"></div>
<div></div>
</div>
Note: using font-size: 0 for the container div to avoid the actual whitespace in the markup - can be avoided by removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
Add float:left; to #right, then it should work. Note that you could also use float:right; to #right, then #right would be on the right side. Using float: left; for both displays both divs next to each other without any gap.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try this script, I wrote it on JSfiddle:
http://jsfiddle.net/xb5vvpzn/1/
HTML
<div class="main">
<div class="top"> </div>
<div class="bottom1"> </div>
<div class="bottom2"> </div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
.main {
width:400px;
border:1px solid #000;
height:400px;
padding:10px;
}
.main div {
display:inline-block;
}
.top {
width:396px;
border: 1px solid #cc0000;
height:100px;
}
.bottom1, .bottom2 {
margin-top:10px;
border: 1px solid #cc0000;
width:195px;
height:100px;
}
Here's a jsFiddle that I've quickly created for you. The layout is same as what you had requested and it's responsive as well.
HTML:
<div id="container">
<div id="onetwo">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</div>
CSS:
#container {
width: 100%;
border: 3px solid blue;
padding: 1% 1%;
text-align: center;
}
#onetwo {
display: block;
width: 100%;
}
#one, #two {
width: 49%;
border: 3px solid red;
height: 50px;
display: inline-block;
}
#three {
width: 100%;
border: 3px solid red;
height: 50px;
}
#media (max-width: 820px) {
#one, #two {
width: 46%;
}
}
#media (max-width: 240px) {
#one, #two {
width: 40%;
}
}
How can I align 4 divs, in css, inside a container like in this image: http://postimg.org/image/w0k7wgdfb/
Here's my html, I guess I need another container for DIV#2 and DIV#3.
<div id="container">
<div id="header"> DIV 1 </div>
<div id="wraper"> <!-- WRAPER -->
<div id="sidebar"> DIV 2 </div>
<div id="content"> DIV 3 </div>
</div> <!-- WRAPER -->
<div id="footer"> DIV4 </div>
</div>
Thank you for your help!
Solution 1 - Floats
After centre aligning the content, you could use a simple float trick for the two middle divs:
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
overflow:hidden;
}
#sidebar {
width:20%;
float:left;
height:100%;
background:red;
}
#content {
overflow:hidden;
background:blue;
height:100%;
}
#footer {
background:orange;
height:20%;
}
Solution 2 - Display:Table
After centre aligning the content, you could apply a table layout to the middle divs
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
display:table;
width:100%;
}
#sidebar {
width:20%;
display:table-cell;
background:red;
}
#content {
display:table-cell;
background:blue;
}
#footer {
background:orange;
height:20%;
}
Here there is a working fiddle.
HTML
CSS
#one{
width: 400px;
background: black;
margin: 0 auto;
height: 600px;
}
#two{
height: 100px;
width: 400px;
background: lime;
}
#three{
height: 400px;
width: 100px;
background: yellow;
float: left;
}
#four{
height: 400px;
width: 300px;
background: blue;
float: left;
}
#five{
height: 100px;
clear: both;
width: 400px;
background: silver;
}
I have 3 blocks - block1, block2, block3..block1 & 2 are left floated
http://jsfiddle.net/MTSg4/1/
The text inside block3 needs to be displayed inside the block but for some reason its displaying outside.
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:left;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
}
html
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>
You need to clear the floats in blocks 1 and 2. Try this for block3:
#block3{
height:90%;
width:50%;
background-color:yellow;
clear:both;
}
Your usage of floats is the problem. You see, block 2 is just a trial and error. It does not float left. Check this FIDDLE.
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
Hope this helps!
Use this css
#block1 {
height: 10%;
width: 50%;
text-align: center;
background-color: red;
display: block;
float: left;
}
#block2 {
height: 90%;
width: 50%;
text-align: center;
background-color: green;
display: block;
float: left;
}
#block3 {
height: 90%;
width: 50%;
text-align: center;
background-color: yellow;
display: block;
clear: both;
}
I think you need to rethink the HTML to achieve this.
Perhaps a better solution is to split this into two columns, with block 1 and 2 in the first column, and block 3 in the second?
HTML
<div id="col1">
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
</div>
<div id="col2">
<div id="block3">
Block 3
</div>
</div>
CSS
html, body{
height: 100%;
width:100%;
}
body {
margin: 0;
}
#col1, #col2 {
float: left;
width: 50%;
height: 100%;
}
#block1{
height:10%;
text-align:center;
background-color:red;
}
#block2{
height:90%;
background-color:green;
}
#block3{
height:100%;
background-color:yellow;
}
Demo
Try this CSS:
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
background-color:red;
}
#block2{
height:90%;
width:50%;
background-color:green;
float:right;
}
#block3{
height:90%;
width:50%;
background-color:yellow;
float: left;
}
.clear {
clear: both;
content: ' ';
*zoom: 1;
}
}
in your HTML:
<div id="block1">
Block 1
</div>
<div id="block2">
Block 2
</div>
<div id="block3">
Block 3
</div>
<div class="clear"></div>
This happens because the "block3" is floating around and not in a position while the other boxes are being called in left (including the box2 [It should be float: right]).
I've fixed and and added a debug class (clear).
Jsfiddle: Demostration
Hope it helps!