I've found out that setting display property of containing block to table and enclosing descendant block boxes in boxes with display property set to table-cell and vertical-align property set to top has same effect as if float property of those boxes was set to left.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>simulating float</title>
<style type="text/css">
#container {
background-color: darkgrey;
margin: 10px;
padding: 10px;
height: 240px;
display: table;
}
.box {
margin: 5px;
width: 240px;
height: 240px;
background-color: grey;
}
.float {
display: table-cell;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
</div>
</body>
</html>
Can someone give me an explanation of this? Thanks.
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Also, display:table-cell makes the element behave like the HTML tag.
The vertical-align:top propriety makes the element aligned to the top of the entire line or align the top padding edge of the cell with the top of the row. So the
.float {
display: table-cell;
vertical-align: top;
}
looks like if it had float:left only.
I hope this will help you understand CSS better.
Related
I'm trying to create a grid with black boxes on the left and right side of the container, and a gray box in the center that contains different elements. The boxes on the left and right should have a width that's half of the container's height, and the middle item should stretch to fit it's content, but the entire container shouldn't be wider than the parent element. Here's what it should look like.
This is the HTML and CSS that I wrote:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
}
#container {
display: grid;
max-width: 100%;
grid-template-columns: min-content auto min-content;
width: fit-content;
}
#middle {
background-color: gray;
}
#left,
#right {
aspect-ratio: 1 / 2;
background-color: black;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="right"></div>
</div>
</body>
</html>
The code works as expected until I set the height of html and body to 100% like so:
html,
body {
height: 100%;
}
When I do this, the left item no longer appears on the page. Here's a screenshot of this. Oddly enough, if I set the margin of body to 0, then the left item appears properly.
I tried reordered the elements in #container so that #left and #right are the last elements in the container, and I used grid areas to force #left to appear on the left side.
/* Added CSS properties */
#container {
grid-template-areas: 'left-side middle-side right-side';
}
#middle {
grid-area: middle-side;
}
#left {
grid-area: left-side;
}
#right {
grid-area: right-side;
}
<!--Modified HTML-->
<div id="container">
<div id="middle">
<p>lorem ipsum</p>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
This made the left item appear, but it overlapped into the middle container, cropping out the beginning of the text. This is what the result looked like.
I know that the problem is rooted in the aspect-ratio property because, if I remove it, and set the width of #left and #right to a value such as 400px, #left appears properly.
Does anybody know how can I make the grid appear properly? Is there perhaps another way I can achieve the same effect as the aspect-ratio property?
My centered header bottom margin is overflowing the parent container, causing a gap between yellow and orange wrappers:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.header-wrap{
background-color:yellow;
}
.content-wrap{
background-color:orange;
}
.header{
margin:0 auto 1em auto;
background-color: red;
width:40em;
}
</style>
</head>
<body>
<div class="header-wrap">
<div class="header">header</div>
</div>
<div class="content-wrap">
<div class="content">content</div>
</div>
</body>
</html>
If I use a simple clearfix for parent .header-wrap{overflow:hidden;} the problem is fixed, but I don't understand why I need to use a clearfix here, since I'm not using floating elements at all.
From what I know, the clearfix is applied on the parent to clear any floated children inside, which is not the case here.
Can anyone explain why is this happening?
.header{
margin:0 auto 1em auto; //margin 1em at bottom
background-color: red;
width:40em;
}
change it to
.header{
margin:0 auto;
background-color: red;
width:40em;
}
DEMO
Add float:left or inline-block to your header. Currently in your structure you mentioned the margin-bottom to header div which is inside the header-wrap class. header is the child element. To display yellow background, you must need to wrap the child element.
DEMO
CSS
.header-wrap {
background-color: #FFFF00;
display: inline-block;
}
I have a div container with a width 1000px, and within it three divs width 33.333333%, all float:left.
There's maybe one or two pixels' width that isn't covered by this 99.999999% where the 100%-width container div shows through (see picture- red pixels on right side).
How can I fix this, preferably without making it four divs for an even 25% each?
You Can Get an Exact and Flexible Solution
If you only float and set the width on the first two elements, and then set either overflow: hidden or overflow: auto (just not visible) on the third element, then the magic works to automatically fill the remaining space, so that there will never be a gap.
See this fiddle example, where I've overridden the values for the :last-child div to make this happen.
This works:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 1000px;
padding: 10px;
background: #5cabc1;
overflow: hidden;
}
div.box {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 33.3%;
float: left;
}
div.b1 {
background: #fca502;
}
div.b2 {
background: #ffff00;
}
div.b3 {
background: #afcfe4;
}
</style>
</head>
<body>
<div class="container">
<div class="box b1">div 1</div>
<div class="box b2">div 3</div>
<div class="box b3">div 3</div>
</div>
</body>
</html>
http://jsfiddle.net/sVu4R/5/
You need box-sizing property:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try this:
display: inline-block;
margin: 0;
padding: 0;
Percentage widths in CSS are each calculated independently. As such, you're ending up with three 333px divs, and one pixel left over.
If the parent element has a fixed width, just set the three columns to the appropriate sizes (333px, 334px, 333px) to fill the container. No need for percentages!
This is quite a highly discussed issue on the web, but after hours of research and trial and error, I am still unable to get the below HTML to behave as desired in IE 7, 8 or 9:
<html>
<head>
<title>Untitled Page</title>
<style>
.container {
white-space: nowrap;
overflow: auto;
position: absolute;
}
.childContainer {
float: left;
}
.box {
float: left;
border: 1px solid black;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="childContainer">
<div class="box"></div><div class="box"></div><div class="box"></div>
<!-- repeat until off screen -->
<div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="childContainer">
<span>This should not wrap!</span>
</div>
</div>
</body>
</html>
The desired behaviour is as follows:
.box elements must not wrap - a scroll bar should appear it the bottom of the window
.box elements must have a fixed width and height
.container and .childContainer cannot have a fixed width. The number of .box elements is arbitrary
must behave reasonably consistently in IE7+ and recent versions of Chrome and FireFox
The provided HTML works in Chrome, I believe it honours the white-space: nowrap even for block elements. I've tried using SPAN elements, but they need to be forced to be a block element with float: left or the width attribute is ignored. They then have the same issue as DIV elements.
I'm sure there must be a solution to this without using JavaScript, but that is an option if all else fails.
http://jsfiddle.net/hjCWN/
I haven't tried it in IE, but you could try removing white-space: nowrap; and replace it to margin-right: -99999px;
Put the boxes in a table. That seems to be the only practical approach.
When you try to make the .box elements appear in a row, the use of float: left has its own effect, which cannot be prevented by setting white-space, as it operates at a different level, so to say. But by putting them into a table row, you force them into a row.
You can even dispense with those elements and just style cells of a table:
<style>
table.boxes td {
border: 1px solid black;
width: 20px;
height: 20px;
padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>
Quite simple question but tried about everything.
what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.
This is the css line i have now:
.container { width: 100%; float: left; display: inline; }
I cant get them to line up next to each other.
Here is a visual to make it more clear.
image url for bigger preview: http://www.luukratief.com/stackoverflow.png
The scrolling part is not the issue for me, just the placement of the divs.
Is this possible using percentages or is this simply not possible.
If so, please tell me how to do this with css.
Thanks in advance!
You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.
For example:
<div class="container">
<div class="contentContainer"></div>
<div class="contentContainer"></div>
</div>
And CSS:
.container {
width: 200%;
}
.contentContainer {
width: 50%;
float: left;
}
How does this look to you?
http://jsfiddle.net/2wrzn/19/
Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.
you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.
If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..
Example Fiddle
HTML Code:
<div class="container" id="p1">Page 1 => Next page</div>
<div class="container" id="p2">Page 2 => Next page</div>
<div class="container" id="p3">Page 3 => Next page</div>
<div class="container" id="p4">Page 4 => Next page</div>
<div class="container" id="p5">Page 5 => Next page</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%;}
body {white-space: nowrap;}
.container {
display: inline-block;
width: 100%;
height: 100%;
}
.container {
display: inline !ie7; /* for working inline-blocks in IE7 and below */
}
.container * {white-space: normal;}
#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}
If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.
If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.
You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)
<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>
The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:
<html>
<head>
<style type="text/css">
body{
width:200%;
margin:0%;
padding:0%;
}
#dvScreen1, #dvScreen2{
width:49.95%;
height:80%;
clear:none;
}
#dvScreen1 {
float:left;
border:solid black 1px
}
#dvScreen2{
float:right;
border:solid blue 1px
}
</style>
</head>
<body>
<div id="dvScreen1">
<p>Screen 1 stuff ...</p>
</div>
<div id="dvScreen2">
<p>Screen 2 stuff ...</p>
</div>
</body>
</html>