what is the proper code for this?
in div style code. I know how to use float but only 2 divides. But in 4 divides, I don't know.
Just float them all left and if necessary add a right margin of -1px so that the borders overlap nicely. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
</html>
Floating will still work for any number of div's, they'll line up next to each other until they fill the width of the container, at which point they will start to wrap to the next line.
Just add float: left for every div.
Also, if you don't want your 4 divs to wrap to the next line when the window gets resized you can place your 4 divs inside a parent div and set the width of that parent div.
Here is an example based on BalusC's code above:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
.parent {
width: 404px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>
Related
In the following code, why does div3 move down a line instead of div2. I am trying to understand how "clear" works in css. If I clear div3 and it moves to the next line, that makes since.
div {
border: solid 1px red;
width: 100px;
height: 100px;
margin: 5px;
}
div {
float: left;
}
<html>
<head>
<title>Tester</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
Below is the code. When i am trying to add margin:50px to the inner box, the outer box is also shifting 50px from the top. I think only the inner box should shift 50px from the top. But it is giving a different result.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, p {
margin: 0;
padding:0;
}
html {
background: #ccc;
}
.outer {
width: 600px;
margin: 0 auto;
background: #9CF;
}
.box{
background: #B7D19C;
width: 400px;
padding: 50px;
border: 2px solid black;
}
p {
background: #EEA458;
height: 100%;
}
/*add styles here*/
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
</div>
</div>
</body>
</html>
Try overflow:hidden; property to the div outer
.outer{
overflow:hidden;
}
two simple solution:
1.
.outer{
padding:50px;
}
or
2.
.outer{
overflow:hidden;
}
I have a container div, which contains a varying amount of divs all with the same class. The contents of the various divs are dynamic and will be driving the height of their div blocks. The width is set to a fixed value making for 2 collumns. I have run into a situation where the first div is floated to the left, then the following 2 divs are each individually shorter than the first, but when combined they extend beyond the first div to their left. The following fourth div is then floating back to the first column under the first div, however it is not floating "up" to be directly under the first div. It will display as being floated to the left with the vertical position being positioned under the third div block. Is there a way to remedy this?
Remember i am generating each of the divs within the container div via a loop and consequently would like to have a consistent style class for each of the divs. If it is not possible to do so with one style class, is there a way to get the height of the div after i filling it with the php script?
Here is an example of the problem i am experiencing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dynamic Div Test</title>
<style>
.container2 {
width: 1000px;
display: block;
position: relative;
float: none;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #000;
overflow: hidden;
-moz-box-shadow: 0px 0px 20px #FFF;
-webkit-box-shadow: 0px 0px 20px #FFF;
box-shadow: 0px 0px 20px #FFF;
min-height: 100%;
}
.container {
width: 660px;
display: block;
position: relative;
float: left;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 35px;
background-color:#093;
height:400px;
}
.dynamicDiv {
float: left;
position:relative;
display:block;
background-color: #FFF;
width: 325px;
padding: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="container2">
<div class="container">
<div id="div1" class="dynamicDiv">1<br />2<br />3<br /></div>
<div id="div2" class="dynamicDiv">1<br />2<br /></div>
<div id="div3" class="dynamicDiv">1<br />2<br /></div>
<div id="div4" class="dynamicDiv">1<br />2<br />3<br /></div>
</div>
</div>
</body>
</html>
Sounds like what you want is a 'masonry' style layout, check out isotope.
EDIT - oops, I may have misunderstood!
Below code will simply give you floated divs but the wrappers won't allow for tall/short "floating". There are plugins available for out of the box solutions though.
Suggestions:
jQuery Masonry
or as Josh Rutherford noted, Isotope.
For every two div's, generate a wrapper div as well.
<div class="container2">
<div class="container">
<div class="wrapper" id="div_wrapper_1">
<div id="div1" class="dynamicDiv"></div
<div id="div2" class="dynamicDiv"></div>
</div>
...
</div>
<style type="text/css">
.dynamicDiv {
float: left;
}
.wrapper {
overflow: hidden;
}
</style>
I have the following simple html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
position: relative;
width: 1000px;
min-height: 300px;
margin: 0 auto;
border: 1px solid red;
background-color: green;
}
#allcontent {
position: static;
top: 225px;
margin: 225px auto 0px auto;
width: 850px;
background-color: blue;
}
#content {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
<div id="allcontent">
<div id="content">
<p>This is content</p>
</div>
</div>
</div>
</body>
</html>
It looks exactly like I want it to look like, but if I remove the border from #page it totally screws up the layout. I can't figure out why. I know, I could have a transparent border as a workaround, but it seems odd...
Because you have margin:225px auto 0px auto in your <div id="allcontent"> that pushes the whole content down.
Instead of using margin, use position:absolute/relative to position your element in your <div id="page">.
The margin for #allcontent is pushing it down.
http://jsfiddle.net/2QjYG/
I would like the parent-div (red) to grow with the green child-div.
Now it just stops at the viewport.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
Use display: inline-block; on the parent <div> and it will work as expected
Make the parent div float:left; and it will be expanded as desired.
I know I'm late, but here's what I do to fix the problem:
Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.
Here's the modified code:
.clear{
clear: both;
/* make sure there is no height set to it */
line-height: 0;
height: 0;
font-size: 0em;
}
<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
<div class="clear">/div>
</div>
Works in FF3 and IE7, but not tested in other browsers though.
Hope to, at least, help you with your problem.
Use display:table; on the parent div. Or you can put the parent div into a cell of a table.
There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.
This should work...
<div style="margin: 30px; background: red;">
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>
...in all browsers, without a problem. HTH.
See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:
div.container {
overflow: hidden;
width: 100%;
}