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>
Related
Just wondering if this is possible for css, i am try to have a layout where left hand column have a fixed width and right hand side have a flex width within a contain of fixed width.
here is the attachment for image
Thanks for any suggestion.
Check if this can help you
HTML
<div class="outer">
<div class="left">Test</div>
<div class="right">Test</div>
</div>
CSS
*{margin: 0}
.outer {
max-width: 1444px;
}
.left {
float: left;
width: 200px;
height: 600px;
background: red
}
.right {
margin-left: 200px;
background: yellow;
height: 600px;
}
You can do it with a table for sure. Not sure if anyone has a better/alternate method.
<html>
<head>
<style>
.container { width:400px; }
.left { width:100px; background-color:red;}
.right { width:100%; background-color:yellow;}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="left">left section</td>
<td class="right">right section</td>
</tr>
</table>
</body>
</html>
You can achieve it by using the following code. Basically we are floating the left side div with fixed width and letting the right side div take up the rest.
HTML:
<div class='container'>
<div class='fixed-left'>abcd</div>
<div class='flexible'>12345</div>
</div>
CSS:
.container{
border: 1px solid black;
max-width: 440px;
}
.fixed-left{
float: left;
width: 200px;
border: 1px solid blue;
}
.flexible{
border: 1px solid red;
width: 100%;
}
Demo|Demo without Margin
You could use float for that:
HTML:
<div class="left-div">This is left DIV with lots of text text text text<br />and even more text</div>
<div class="right-div">
<div class="upper">This is upper right DIV</div>
<div class="lower">This is lower right DIV</div>
</div>
CSS:
.left-div {
width: 200px;
float: left;
}
.right-div {
float: right;
}
.upper {
max-width: 100%;
}
.lower {
max-width: 1444px;
}
Fiddle: http://jsfiddle.net/68u8N/
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 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>
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>