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;
}
Related
I have 3 divs in wrapper. I want 2 of them to stick to top-left and they need to be under each other. Third div needs to stick to top-right, but doesn't stick to top.
This is how I tried to do it but failed: http://jsfiddle.net/TZ82X/
<div id="wrapper">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
<div id="nav">Navigation</div>
</div>
CSS:
#wrapper {
background: #CCC;
width: 500px;
height: 250px;
margin: auto;
}
#logo {
background: tomato;
width: 300px;
height: 20px;
float: left;
}
#motto {
background: sienna;
width: 300px;
height: 20px;
float: left;
clear: left;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
}
This is 1st fix with rearranging of divs in .html: http://jsfiddle.net/KJG9q/
<div id="wrapper">
<div id="nav">Navigation</div>
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
This is 2nd fix with another container div: http://jsfiddle.net/x98Mf/
<div id="wrapper">
<div id="logo-motto-container">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
<div id="nav">Navigation</div>
</div>
CSS:
#logo-motto-container {
float: left;
I don't want to rearrange elements in .html because I want them arranged properly for styling for mobile, I could go with another wrapper div but I want to know why the first method didn't work and if is there a fix for it without messing in .html and keeping template flexible (without position: relative)?
I have modified your fiddles so as to give you what you want to do.
The following link is the modified version of your first fix fiddle. I have just played with the css properties and not moved any of your html div's as you wanted.
Fiddle Link
#nav {
background: seagreen;
width: 100%x;
height: 40px;
}
Remove float: right; from #nav.
#nav {
background: seagreen;
width: 200px;
height: 40px;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
position: absolute;
}
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 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;
}
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 have the following setup for a 3 column layout:
#column-menu {
float: left;
width: 25%;
}
#column-main {
float: right;
width: 55%;
}
#column-side {
float: left;
width: 20%;
}
This code works with the following html:
<div id="column-side">my right side content</div>
<div id="column-main">my main content</div>
<div id="column-menu">my sub menu</div>
I'm not committed to using floats. It just so happens that it works with the above structure, except for when nothing is in column-side. In that case I would like column-main to cover the additional width and not be constrained to 55%. Is there a way to build that kind of flexibility with CSS alone?
If you want to do it with floats, you will have to reorder your elements:
.column-side {
float: left;
width: 20%;
background: #00ffff;
}
.column-menu {
float: left;
width: 25%;
background: #00ff00;
}
.column-main {
overflow: hidden;
background: #ffff00;
}
<div class="column-side">Side</div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
<hr />
<div class="column-side"></div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
then in that case you want something like this:
if you remove <div id="column-menu" class="align">my sub menu</div> you will see how it works with proper fluidity.
.wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#column-menu {
width: 25%;
background: red;
}
#column-main {
width: 55%;
background: blue;
}
#column-side {
width: 25%;
background: green;
}
<div class="wrapper">
<div id="column-side" class="align">my right side content</div>
<div id="column-main" class="align">my main content</div>
<div id="column-menu" class="align">my sub menu</div>
</div>
A quick explanation of what's going on here:
you are using table-layout:fixed; it will automatically equally proportion the child elements with the relative css rule which in this case is display:table-cell;
Now because we don't want it to be equal we set the percentages but because of the fixed property when a div is removed the remaining two div's will just span proportionality and auto calculate what there widths should be to still take up the full width of the container.