Develop Reference

How to expand a div with css

Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>

From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.

You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.

Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/

There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/

CSS float:left and overflow:visible cutting off text

I'm currently trying to make a color gradient in javascript with numerical values in some of the divs to represent as the scale. However, I've noticed with larger values, the numbers get cut off due to the float:left. I've also tried used display:inline-block, but it seems that has weird positioning and leaves gaps between them. I need the divs flush together, but just have the text overflow ontop of the following div. Is there a way to do this?
Both examples I mentioned are here:
http://jsfiddle.net/y3LTZ/3/
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>
and
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>
Thanks!

DEMO
using inline-block
HTML
<div class="wrapper">
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
</div>
CSS
.wrapper{
width: 600px;
height: 30px;
white-space: nowrap;
font-size:0;
}
.single-block{
width:20px;
height:100%;
display:inline-block;
vertical-align:bottom;
font-size:16px;
}
.red{
background-color:red;
position:relative;
}
.green{
background-color:green;
}

If you want the text overlap the following div, you have to give them position:absolute;
<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
</div>
Css:
.column {
width:20px;
height:100%;
overflow: visible;
float:left;
z-index:0;
}
.textontop {
position:absolute;
z-index:999;
}
Jsfiddle:
http://jsfiddle.net/y3LTZ/5/

Surrounding bigger div with smaller divs?

I've got a mindblowing task... for me. Here is the jsFiddle example of what I'm trying to achieve.
Code in the fiddle:
HTML
<div id="container">
<div class="smallsq">Small Square</div>
<div class="bigsq">Big Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="vertsq">Vert Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
</div>
CSS:
#container {
width:500px;
height: 500px;
background: #ccc;
display: block;
}
.bigsq {
width: 20%;
height: 20%;
background: red;
float: left;
display: block;
}
.smallsq {
width: 10%;
height: 10%;
background: green;
float: left;
display: block;
}
.vertsq {
width: 10%;
height: 20%;
background: blue;
display:block;
float: left;
}
In short:
I've got 3 square sizes. I really need to surround the Big Box and Vert Box with Small boxes but notice NO MATTER WHAT THEIR POSITION IS (eg. two smalls before big, or big-small-small-big-ver, or four smalls-vert-small-big, etc). Not only to the right of the Big & Vert boxes but and in left should have a Small boxes too, so there'll be no empty rows like in my example... Please notice also that I don't want to use eg. "small holder" to hold my small boxes like I've been read recently for the only solution of this problem.
I have no problem to use jquery or js or everything you propose to reach the Goal :)
P.S: The image of the result wanted:

The Masonry Layout ?
My answer comes from a search and what you are trying to achieve is explained here really well.
As expected, to achieve this goes beyond the capabilities of just CSS ( though perhaps boxflex will get us there / near for a CSS only solution )
From that article are a number of links to javascript libraries.
http://masonry.desandro.com/ http://www.wookmark.com/jquery-plugin
http://isotope.metafizzy.co/
http://suprb.com/apps/nested/
http://yconst.com/web/freetile/
No credit to me, as this info came off a search - hopefully it puts us in the right direction by studying the article and the javascript libs to see what is going on and find the simplest implementation for your job.

Here is a possible css solution. Basically I'm making the large boxes cover the small ones, and making them layout-neutral.
.bigsq {
width: 20%;
height: 20%;
background: red;
float: left;
display: block;
margin-bottom: -20%;
margin-right: -20%;
z-index: 1;
position: relative;
}
http://jsfiddle.net/sabof/6H5ex/

A possible solution would be possible using jQuery Nested.
Here is how your code would look like:
HTML
<div id="container">
<div class="box size11"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size22"></div>
...
</div>
JS
$("#container").nested({selector: '.box'});

Not sure what you mean, but try this
#big {
float:left;
width:100px;
height:100px;
background-color:gray;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#small {
float:left;
width:50px;
height:50px;
background-color:gray;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

Layout similar to google chrome's tweetdeck app

I am new to web programming. I want to use multiple column layout where each column will have content corresponding to column title, as used in tweetdeck app http://www.tweetdeck.com/ in my google chrome application. How can I go about doing this.

You can use flexbox to create the desired layout (JSFiddle):
HTML:
<div class="container">
<div class="container__column">Column 1</div>
<div class="container__column">Column 2</div>
<div class="container__column">Column 3</div>
<div class="container__column">Column 4</div>
</div>
CSS:
.container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex; /* applying flexbox layout for all browsers */
}
.container__column {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1; /* 1 for equal column widths */
}

Your question is a bit vague. Are you asking how to achieve the same sort of layout or do you want to know how to populate a column with content?
If it's the former, you could do something like this:
HTML:
<body>
<div id="container">
<div class="columns" id="div1"></div>
<div class="columns" id="div3"></div>
<div class="columns" id="div2"></div>
</div>
CSS:
body {
padding:0px;
margin:0px;
}
#container {
width:900px;
margin:0 auto;
text-align:center;
}
.columns {
width:280px;
height:250px;
background:#CCCCCC;
}
#div1 {
float:left;
}
#div2 {
margin: 0 auto;
}
#div3 {
float:right;
}
To give each column content it really depends what you're doing. If it's your own content, you could use a database and AJAX to pull in content from PHP scrips.

Float divs around a 'static'

I am building a website with content in small divs. They are all floating left so basically it's all tiled. I want a banner every third row. How many content divs are visible depends on the users screen width. I had a solution in JavaScript, but IE doesn't like that.
More graphic: this is what I want:
and on a wider screen things should look like this:

This is what I came up with:
Preview: http://jsfiddle.net/Yqy9B/5/embedded/result/
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row clear">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="advert">
Advertisement
</div>
.row {
height:80px; /*height = 10px margin(top/bottom) + 60px height of .box */
overflow: hidden;
}
.box {
width:160px;
height:60px;
float:left;
background:#999;
margin:10px;
display:inline;
}
.advert {
width:485px;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
}
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* For IE 6/7 (trigger hasLayout) */
Is that what you are talking about?
http://jsfiddle.net/Yqy9B/5/

Update:
For the overlapping issue in Chrome and Safari, I've added some code that will add some padding for those browsers, as I could not find a more elegant cross-browser solution. To see the version with the additional code, see http://jsfiddle.net/Yqy9B/16/. I've also updated the code below.
Using a combination of clear: and float: properties in CSS, we can space the advertisements down one side and the content down the other. This will allow for the content to flow around the advertisements, which will keep the ads in the same spot on resize, but flow the content boxes below it.
Here's an example: http://jsfiddle.net/cjyoung1/Yqy9B/10/ (update: new example to address overlap: http://jsfiddle.net/Yqy9B/16/)
(Note: I left the spacer as red to show how it works, you can change it to your background color or transparent - but needs to be at least 1px wide to work properly in some browsers)
The CSS:
.box {
width:160px;
height:60px;
margin:10px;
background:#999;
display:inline-block;
}
.advert {
width:100%;
height:60px;
margin:10px auto;
background:red;
text-align:center;
line-height:60px;
display:block;
float:right;
clear:right;
}
.spacer {
float:right;
clear: right;
height: 250px;
width: 1px;
background: #f00;
}
/* **Below are the updates to fix the overlap in other browsers** */
/* fix webkit overlap */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.advert{
margin-top:80px;
}
.spacer{
margin-bottom:-80px;
}
}
/* fix IE6 overlap */
* html .advert {
margin-top: 40px;
}
The HTML:
<!-- floating to right -->
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<span class="spacer"></span>
<span class="advert">Advertisement</span>
<!-- floating to left -->
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>