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>
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>
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks
I have been trying this for sometime now.
What I am trying is a 3 column layout using div as below:
Header
body - 3 columns (left, center, right)
footer
sample i used:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
The issue that I am facing is that, whenever I resize the window, the div starts to shrink - which I dont want to happen.
I want layout something like http://www.w3schools.com/
where when I resize the window, the div doesnot shrink but rather doesnot show the other columns.
Any help is appreciated.
Set the min-width property to stop an element shrinking.
I would suggest you to wrap all divs around one which is with some fixed width or min-width set (as someone else suggest).
I have two divs, the right one is 80px wide the other should fill up the remaining space. So far I tried:
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#left {
position: relative;
margin-right: 80px;
background-color: red;
}
#right {
float: right;
position: relative;
text-align: left;
width: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>
However, the right box is always put below the left box and not right to it. I guess it is because of the margin. I also tried a margin-left: -80px on the right one but this doesnt seem to change anything. So how do I have to change the CSS so that the right div is in the same line as the left div?
Have the right div before the left.
<div id="right">
Right
</div>
<div id="left">
Left
</div>
Working Example
Alternatively, if you're looking for the LEFT div to remain at a static width and the RIGHT div to expand and contract with the size of the page, you'd use the following code:
.left {
float: left;
position: relative;
width: 80px;
background-color: red;
}
.right {
position: relative;
text-align: left;
margin-left: 80px;
background-color: yellow;
}
And the HTML would be...
<div class="left">Left</div>
<div class="right">Right</div>
That's because div is a block element, meaning it will always break the flow. What you can do is change both the div's display to inline and float to left.
You can change the position:relative; of #right to position:absolute;top:0;right:0;.
This will position the element in the right-top corner of its parent.
Example: http://jsfiddle.net/WaQGW/
Nowadays it can be done with flex.
Set container's (body in this case) display property to flex, then set width of left div to 100%.
body {
margin: 0;
padding: 0;
display: flex;
}
#left {
background-color: red;
width: 100%;
}
#right {
width: 80px;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>
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%;
}