http://jsfiddle.net/a34qkx8k/
HTML
<div class="upper">
<div></div>
</div>
<div class="lower">
<div class="hid">
<div ></div>
</div>
</div>
CSS
.upper {
background:black;
height:80px;
}
.upper div {
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
.lower {
margin-top:-60px;
}
.lower > div {
width: 100%;
background: green;
}
.lower > div.hid{overflow:hidden}
.lower>div>div {
width:100px;
height:100px;
background:red
}
The displays of above HTML on Firefox and Chrome are different, I know it has something to do with "overflow:hidden", but I don't know what exactly is causing this issue. Is there any elaborate document about this different behavior among the two major browsers?
And, 'overflow:hidden' seems to affect the document flow, what is the theory behind this behavior?
Related
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I am trying to place two divs side by side and using the following CSS for it.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
I hope there is a fix for that.
Thank you.
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
Try a system like this instead:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
This is easy with a flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Using this CSS for my current site. It works perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Make both divs like this. This will align both divs side-by-side.
.my-class {
display : inline-flex;
}
Here's my answer for those that are Googling:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
You can also use the Grid View its also Responsive its something like this:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
and the HTML should look like this :
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
here is a link for more information:
https://www.w3schools.com/css/css_rwd_grid.asp
im quite new but i thougt i could share my little experience
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>
margin-right isn't needed though.
<div class="row">
<div class="column fixed"></div>
<div class="column flexible"></div>
<div class="column fixed"></div>
</div>
Where .column.fixed are both of a fixed width and column.flex is the full width between those.
The only way I know is using positioning, but I'm wondering if it can be done using display: table-cell.
Codepen: http://codepen.io/bernk/pen/leCxm
Clean and responsive. Pure CSS. No messing with display property.
<div id="layout">
<div class='left'></div>
<div class='right'></div>
<div class='center'></div>
</div>
<style>
.left {
width: 20%;
float:left;
background: red;
}
.right {
width: 20%;
float:right;
background:blue;
}
.center {
margin:0 auto;
width: 60%;
background:green;
}
</style>
Fiddle: http://jsfiddle.net/N75Rn/
As you note, you could use display:table
option 1: display:table
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit content</div>
<div class='cell'>expand content</div>
<div class='cell'>fit content</div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
width:1%;
border:1px solid black;
height:10px;
}
.cell:nth-child(2) {
width:100%;
}
option 2: floats
....or, you can use floats
Demo Fiddle
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
border:1px solid black;
height:10px;
}
div:nth-child(1) {
float:left;
width:40px;
}
div:nth-child(2) {
float:right;
width:40px;
}
div:nth-child(3) {
overflow:hidden;
}
I like to do this kind of layout with position: absolute on the fixed-width elements and a padding value on their parent equal to their width.
It has an advantage in RWD/SEO since the order of the columns doesn't matter. Also, the contents of the flexible element won't leak out below the fixed-width elements when the flexible element is higher than them, which may or may not be desirable depending on your design.
The disadvantage to this is that the fixed-width elements are taken out of the content flow, meaning you may have to, somehow, compensate for their height if they're higher than the flexible element and if that breaks the layout.
Example:
HTML:
<div class="row">
<div class="column fixed fixed-left"></div>
<div class="column flexible"></div>
<div class="column fixed fixed-right"></div>
</div>
CSS:
.row { padding: 0 150px; }
.fixed {
position: absolute;
top: 0;
width: 150px;
}
.fixed-left { left: 0; }
.fixed-right { right: 0; }
Here's a pen with this.
I want to achieve the following behavior with HTML and CSS on a single webpage
I got the first three areas to work (black, red, blue) but I had problems with the scrollable content (green). It works with static height, but I don't know how to fill the rest of the page dynamically.
Here is what I got
Link to Code
<div class="body">
<div class="menu">
menu
</div>
<div>
<div class="dynamiccontent">
<div class="errorheader">
Errors
</div>
<div class="errorcontent">
errors
</div>
<div class="fixedtext">
some text
</div>
<div class="fillcontent">
fillcontent
</div>
</div>
</div>
.body
{
background:red;
margin:0 auto;
width:100%;
top:0px;
}
.menu
{
background:black;
color: white;
height: 100px;
}
.dynamiccontent
{
position:fixed;
top:50px;
margin:0px auto;
width:100%;
background: red;
}
.errorheader
{
color: white;
text-align: center;
font-size: 1.4em;
}
.errorcontent
{
color: white;
text-align: center;
}
.fixedtext
{
background: blue;
color: white;
position: relative;
}
.fillcontent
{
background: green;
position: relative;
overflow: auto;
z-index: 1;
height: 400px;
}
A nice to have would also be the use of the "browser-scrollbar" on the right side (not only a short local scrollbar in the green content-box).
Thank you for your help!
Using overflow:hidden to the html,body,.main and overflow:scroll to the .main-content, you can simulate what you need.
HTML:
<div class="main">
<div class="header">header</div>
<div class="dynamic-content">
<div class="dynamic-content-text">
dynamic-content-text<br/>...
</div>
<div class="dynamic-content-fixed">dynamic-content-fixed</div>
</div>
<div class="main-content">
main-content<br />...
</div>
</div>
CSS:
html,body, .main{
margin:0;
padding:0;
height:100%;
overflow: hidden;
}
.header{
position: fixed;
left:0;
right:0;
height:50px;
background: red;
}
.dynamic-content{
padding-top:50px;
}
.dynamic-content-text{
background:yellow;
}
.dynamic-content-fixed{
background:blue;
}
.main-content{
background:green;
height:100%;
overflow: scroll;
}
JSFiddle
You could achieve this with jQuery/ javascript.
First check if the page has a scrollbar, if there is no adjustment is needed. If not, the last container needs to be stretched to fill the rest of the window space.
Add the container heights together and subtract from the window height then set that as height for the last container.
Just have method like (Not tested)
$(document).ready(function(){
if(!hasScrollbar()) {
var filled = $(".errorheader").outerHeight() + ... ;
$(".fillcontent").height($(window).height()-filled);
}
});
There are a lot of code for finding if the window has a scrollbar, check here on stackoverflow. If you expect the users to resize the window you could add a callback for $(window).resize();
Another possible solution would be to use the body element to fake that the last container expands. If the containers are identified by their background you could just use the same background for as the last container. Just remember to set the body to fill 100%.
I'm trying to place some divs, with this rule: Fill first column where possible, then (when first column is full) fill the second column, etc. (Please see the image below)
This is what I want to have: (created with Paint!)
In the image above, as you can see, first column has 1,2,3,4 and there is not enough vertical space to put 5 in the first column. So 5 should be placed on the second column...
I've tried to create something like the image above using float:left, but this is the result:
How to create something like the first image? What's wrong with my current code (which creates the second image)?
This is my HTML code:
<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>
And this is my CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.i1,.i2,.i3 {
float:left;
width:100px;
background:lime;
border-radius: 20px;
text-align:center;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}
Fiddle of my code
just modern tablets and smartphones should show it correctly
In that case, use CSS3 columns. The browser support should be good enough.
http://jsfiddle.net/thirtydot/AQ7bp/4/
.container {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.i1,.i2,.i3 {
display: inline-block;
vertical-align: top;
}
You will have to separate the columns into extra divs. Float left aligns elements horizontally, so they will behave like words in a sentence. Wrapping each section of divs and floating the wrapper left creates the effect you desire, but only in this specific case. If this is to be more dynamic, you might have to re-think your design.
HTML:
<div class="container">
<div class="wrap">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
</div>
<div class="wrap">
<div class="i2">5</div>
<div class="i3">6</div>
</div>
<div class="wrap">
<div class="i1">7</div>
<div class="i1">8</div>
</div>
</div>
CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.wrap
{
float: left;
width: 102px;
}
.i1,.i2,.i3 {
width:100px;
background: #000;
border-radius: 20px;
text-align:center;
color: #fff;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}
http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (I changed the colors because they hurt my eyes.)
After some clarifications on the question, if this is to be dynamically populated with shifting heights then there is no solution that doesn't use some crazy Javascript. You'll have to come up with another design.
You can probably make it work with flexbox. I'm not sure about the support in iOS browsers but newer webkit browsers do support it so it might be worth a look.
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
}
How to create two boxes (floating side by side) of same height.
I want to create boxes of height 40% of the container/window?
See the Example Here
If that is what you are looking for, here is more:
CSS:
#parent{
width:205px;
height:200px;
border:1px solid #000000;
overflow:auto;
}
#child1{
height:40%;
background:#00ff00;
float:left;
}
#child2{
height:40%;
background:#0000ff;
float:left;
}
The Important Points:
The float:left is used to align the two boxes side-by-side
The height is specified in % for both child boxes so that they inherit from their parent.
HTML:
<div id="parent">
<div id="child1">
This is first box
</div>
<div id="child2">
This is second box
</div>
</div>
This should be a simple solution for you. Here's my example:
jsfiddle
HTML:
<div class="wrap">
<div class="left">
Content
</div>
<div class="right">
More content
</div>
</div>
CSS:
.wrap
{
width: 400px;
height: 500px;
border: 1px solid #000;
}
.left, .right
{
float: left;
width: 45%;a
height: 40%;
margin: 2%;
}
.left
{
border: 1px solid #f00;
}
.right
{
border: 1px solid #00f;
}
Using a % as height is relative to your parent container's height. Therefore you need to declare the height of your parent container. Take a look at this tutorial: Equal Height Columns.
The question specifically mentions floating, and there have been several good answers for that, but I thought it might be worth posting an answer that doesn't use floats in case the the mention of floating was accidental:
.wrapper {
width: 400px;
height: 400px;
outline: 1px solid #000;
}
.wrapper div {
display: inline-block;
width: 198px;
height: 40%;
background: #66c;
}
.wrapper div:first-child {
background: #6c6;
}
<div class="wrapper">
<div>This is the first box</div>
<div>This is the second box</div>
<p>Some other content</p>
</div>
It doesn't currently work in WebKit, but I assume that's a bug and there'll be a workaround, I am investigating. If you need it to work in IE < 8 add a conditional comment:
<!--[if lt IE 8]>
<style>
.wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->