I have the following code:
<div "background-color:green">
<div "float:left">something</div>
<div "float:right:>something else</div>
<div>
Why does the background color not appear in this case? What needs to be done to make it appear
{Code simplified for understanding , may not be in the approporiate syntax}
You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:
<div style="background-color:green; overflow: hidden;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>
Notice the overflow: hidden.
Of course, it only works where you don't require elements to leave their containing elements.
A floated object is "lifted" from its containter. The bottom edge of the outer div doesn't stretch to its content anymore.
An option is to add an element with clear (clear takes a direction (either left, right, or both), and pushes itself below a float it would touch:
<div style="background-color: green">
<div style="float: left">something</div>
<div style="float: right">something else</div>
<br style="clear: both;" />
<div>
You need to write in the style attribute
<div style="background-color:green;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>
Related
Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>
What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
Could you offer some suggestions or insights?
display: table-cell is perfectly fine to use, with just one downside..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
IE7 still has some usage, but you should check your Analytics, and then make a decision.
To answer your specific use case, you can do it without display: table-cell, provided that you don't need the height to adjust based on content:
http://jsfiddle.net/g6yB4/
<div class='clearfix'>
<div style='float:left; width:100px; background:red'>some content</div>
<div style='overflow:hidden; background:#ccc'>some more content</div>
</div>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
</div>
To extend to a 3-column with fluid center:
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px; margin-right:100px;">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
<div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
Right content here
</div>
</div>
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.
On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.
You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)
<div>
<div style="float: left">
<p> This div will be on the left</p>
</div>
<div >
<p> This div will be on the right</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.
<div>
<div style="width: 100px; float: left">
<p> 100px div will be on the left</p>
</div>
<div style="width: 200px">
<p> 200px div will be on the right as long as there is enough
horizontal space in the container div
</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"><!-- usually leave this empty --></div>
</div>
You can also float:right; in order to make the divs align on the right side of the page. The clear is VERY IMPORTANT. In IE a lot of the time the float left/right rule is propagated to other elements to elements you did NOT intend to float. Usually though; you don't pick up on this right away and it becomes a nightmare to figure out why your page looks like crap down the road. So just make a habit of putting an empty clear div as the last sibling of any divs you decide to float.
Most simple way is CSS float:
<div id="div1">hello</div>
<div id="div2">world</div>
And the CSS:
#div1 {float: left;}
#div2 {float: left; margin-left: 10px;}
Simple test case.
After the floating divs add another one to clear the float so that further contents will be displayed fine:
<div style="clear: both;"></div>
float is a quick way, inline-block is another quick way and has some advantages over float such as not needing a clear:both element.
here's an example with both methods http://jsfiddle.net/dGKHp/
HTML:
<div id="floatExample">
<div>Float Left</div>
<div>Float Right</div>
<br />
</div>
<div id="inlineBlockExample">
<div>Left</div><div>Right</div>
</div>
CSS:
#container {width:600px;margin:0 auto;}
#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}
#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}
This is a pretty good write-up on ins and outs of inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I Need the right Column elements to be flush with the javascript back button image. Not sure what the deal is, I have tried clear left, clear right, and clear both.
Live Example:
http://newsite.702wedding.com/las-vegas-marriage.asp
Any Help Would be Great.
Change the code which looks like this:
<div class="package-back-button1"></div>
<div class="clearfloat-left"></div>
<div class="win-this-package1"></div>
into this:
<div style="float: left">
<div class="package-back-button1"></div>
<div class="win-this-package1"></div>
</div>
So, remove the .clearfloat-left div, and enclose the two items inside a div with float: left.
A kinda yucky (but easy) fix is to do this:
On .package-right-box1, add margin-top: -89px.
Tested in Firefox, IE7/8.
Here is a solution on jsfiddle. Code is below.
<!--Left Column Boxes-->
<div style="width:50%; float:left">
<div style="background-color:#f00; width:100%">left1</div>
<div style="background-color:#0f0; width:100%;">left2</div>
<div style="background-color:#00f; width:100%;">left3</div>
</div>
<!--Right Column Boxes-->
<div style="float:right; width:50%">
<div style="background-color:#aaa; width:100%;">right1<br />
<div style="background-color:#ff0; width:100%;">right2</div>
</div>
<div style="background-color:#0ff; width:100%;">right3</div>
</div>
Also, be aware that your second div on the right was nested within the top-right div. I'm not sure that was intended, but am just pointing it out.
I have a question about my layout. I have a setup something like this:
<div id="container">
<div id="body">
<div id="item">
</div>
<div id="item">
</div>
</div>
</div>
And I want the body box to stretch with the amount of items I put in it but it doesn't. anyone know how to fix this with css.
If your items are floated, you could add a block with clear: both; parameter set, as Pat mentioned already.
If you don't want one more element in your code, you could apply overflow: hidden; to your body:
<div id="container">
<div id="body" style="overflow: hidden;">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Be carefull though, as everything that sticks outside the body box will be cut.
First off, you should use a class for your item div's as id's should be unique on the page. Second, this is probably being caused by your item div's being floated. If you add a clearing element below them, it should fix it:
<div id="container">
<div id="body">
<div class="item"></div>
<div class="item"></div>
<div style="clear: both"></div>
</div>
</div>
Have your item divs float left (display: inline might work too, haven't tried it), and set the display of your body div to display:inline-block;. That should shrink to fit its contents.
Quick and dirty:
<div id="container">
<div id="body" style="display:inline-block; overflow: auto;">
<div class="item" style="float: left;">
Hi
</div>
<div class="item" style="float: left">
There
</div>
</div>
</div>
Edit: Fixed, thanks to Matt Sach.
I would personally discourage the use of inline-block, Internet Explorer support for it is poor in older versions.
IE 6-8 (8 compatibility mode only) have issues with it.