I know this is kind of a stupid doubt about floating CSS layout, but I can't find the answer anywhere.
I want to have a simple page, with a big red reactangle in the middle, and 2 blue squares within, one on each side of the rectagle.
I have the following HTML code:
<body>
<div id="rectangle">
<div id="left"></div>
<div id="right></div>
</div>
</body>
and then I have this css:
#rectangle {
width: 600px;
margin: auto;
padding: 50px;
background-color: red;
}
#left {
float: left;
width: 250px;
height: 250px;
background-color: blue;
}
#right {
float: right;
width: 250px;
height: 250px;
background-color: blue;
}
And this doesn't work, because the red rectangle doesn't adapt its height to cover the blue squares because they are floating I guess...
The only way I know to solve this is adding a new
<div id="footer"></div>
at the end of the rectangle div, with style
clear: both;
and I'm sure there should be a more elegant way to do this, isn't there?
Simply add overflow: auto to the #rectangle div.
Example: http://jsfiddle.net/ZVJQN/
add clear div
<div id="rectangle">
<div id="right"></div>
<div id="left"></div>
<div class="clear"></div>
</div>
.clear
{
clear:both;
}
Related
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
I am new to html and css. I coded a html page with css but confused.
I used this css code
#container {
background: #000000;
width: 500px;
margin: auto;
}
#left {
background: #FF0000;
width: 200px;
float: left;
}
#right {
background: #0000FF;
width: 200px;
float: right;
}
and this html code
<div id="container">
<div id="left">This is left</div>
<div id="right">This is right</div>
</div>
But I didn't got black background that I specified in #container.
Can you help me with that. I want background to move automatically as i write content. in between divs having id container.
this is because you are using Float for your inner divs and the container does not contain any text,
try this
<div id="container">
hello <br>
<div id="left">This is left</div>
<div id="right">This is right</div>
<br><br>
</div>
Set the #container to
float: left;
or
display:inline-block;
Click here for live example.
This will works fine for you
#container {border:2px solid #cccccc;
height:50px;
background-color: #000000;
width: 500px;
margin: auto;
}
I have 2 block-inline divs.
I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.
It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.
How can I do that ?
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.div2 {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear">
</div>
Hope it helped.
If you don't want to use jquery then this might worth doing
<div style="width:100%;">
<div style="float:left; display:inline-block;" class="div1">left div</div>
<div style="float:right; display:inline-block;" class="div2">right div</div>
</div>
I am having a problem with what i think is my style sheet. My site page seems to be set up fine:
However, when i view it in a browser the middle document is out of line:
Could there be anything causing this to happen? it leads me to think maybe something in my css file is? But what? :(
My css file is as follows:
div.left
{
float: left;
width: 15%;
background-color: white;
}
div.right
{
float: right;
width: 40%;
background-color: white;
}
div.center
{
float: left;
width: auto;
background-color: white;
text-align:center;
}
That's most probably due to your floating elements and since the center div is not floated at all, but rather "pushed" to the middle by the float:left of the left div.
If your div's in the html are like:
<div class="parent_div">
<div class="left"> left </div>
<div class="center"> center</div>
<div class="right"> right</div>
</div>
Try floating the center div to the left also, and it should do the trick
div.center
{
float: left;
width: auto;
background-color: white;
}
I new to webdesign and I wonder how I could do something like this:
..........................
LEFT --- CENTER ---- RIGHT
..........................
Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.
This is how it looks now.
My current HTML:
<div id="container_m">
<div id="left">
<p>My name is Barnabas</p>
</div>
<div id="right">
<p>Till salu</p>
</div>
<div id="center">
<p>Senaste nytt</p>
</div>
</div>
My currrent CSS:
#container_m
{
position:absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#left
{
position: relative;
height: 100%;
width: 33%;
float: left;
background-color: blue;
}
#right
{
position: relative;
height: 100%;
width: 33%;
float: right;
background-color: green;
}
#center
{
position: relative;
height: 100%;
width: 33%;
margin:0 auto;
background-color: yellow;
}
Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:
<div style="clear: both;"></div>
This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.
whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:
<div id="parent">
<div id="left">
Left Content
</div>
<div id="center">
Center Content
</div>
<div id="right">
Right Content
</div>
</div>
And then float them all left. :)
You can simplify that hugely: http://www.jsfiddle.net/fsnuh/
HTML:
ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds
<div id="container_m">
<div class="red">
<p>My name is Barnabas</p>
</div>
<div class="yellow">
<p>Till salu</p>
</div>
<div class="green">
<p>Senaste nytt</p>
</div>
</div>
CSS
Styles for left, right and center combined into one. Overuse of position: relative removed.
#container_m
{
position: absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#container_m div
{
height: 100%;
width: 33.33%;
float: left;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.yellow
{
background-color: yellow;
}