I have a div within a div, and when viewing the web page in IE6, it does not display spacing between the bottom of div class="video-tour" and the bottom of div class="content-body"
Here is what it looks like in IE6: http://i42.tinypic.com/20zs7s7.png
Here is what it looks like displaying correctly in Safari: http://i44.tinypic.com/2h69de1.png
The css for .video-tour <-- there are multiple videos that are split up into different boxes as you'll see, they have a width of 31%
.video-tour {
float:left;
width:31%;
border:1px solid #fdbe2f;
background-color:#ffc;
text-align:center;
padding:3px;
overflow:auto;
margin:6px;
}
.video-tour img {
border:1px solid #fdbe2f;
padding:3px;
}
CSS for .content-body which .video-tour is within
.content-body {
padding:10px 15px;
font-size:.8em;
font-family:arial;
overflow:auto;
}
Any help as to why there is no spacing at the bottom in IE6 and spacing in other browsers would be helpful.
Try adding a div at the bottom after video-tour that has a style of clear: both.
I believe its because you need to clear the floats.
You could try place a
<div style="width: 100%; overflow: hidden;"><!-- floats go here --></div>
Around the entire content with video-tour's.
Related
I'm struggling with this:
I want to place a range slider next to an output tag. Both tags should be on the same line while the input range slider takes the full width of the given space.
Problem: I have to
display:block
the span element, because i want to set a fix width. This and the
width:100%;
for the range slider makes it impossible (for me) to achieve my goal.
I've set up a JSFiddle.
So, how can i achieve this?
fixed width for the output tag
output and input should be sitting side-by-side on one line
the input slider should be taking the full width of the given space
Without float and IE8 and above supported way
use display:table
working demo
.form-inline {
display:table;
border:1px solid green;
table-layout:fixed;
width:100%;
margin:0;
padding:0;
}
.input_button {
display:table-cell;
width:104px; /* Fixed span width*/
margin:0;
padding:0;
text-align:center;
border:1px solid black;
}
#range_slider {
border:1px solid red;
display:table-cell;
border:1px solid red;
margin:0;
padding:0;
}
You need to set left float on span and instead of giving range slider a width of 100%, give span 19% and range slider 78%. You need to divide 100% among themselves.
.input_button{
float:left;
width:19%;
}
#range_slider{
width:78%;
margin-top:33px;
margin-left:10px;
}
Here is a fiddle
Rather than setting display:block for span element, try Can using display:inline-block
I have boxes floated inside a div sort of like the SO Chat except i am making a box for my own website where users can make their own chat room, these boxes on the page represent chatrooms and i want to make a perfect width for them so they will fit exactly on the page without any excess space in the margins. the main div they are positioned in is 965px with a padding of 15px on the left and right side of it making a 935px width i reduced the width from 965px to 935px to keep a total width of 965px.
To get an idea of my scenario check out A Fiddle
As you can see there is some space left at the end right side of the div and i dont want that, i want the chat boxes to fit pixel perfectly the full width and remember to take into account that borders count as widths too. If someone could help me that would be great!
CSS Styles
body {
width:1000px;
}
#Body {
width:935px;
padding:15px;
height:500px;
background-color:#F1F1F1;
margin:0 auto;
}
.ChatRoom {
float:left;
width:223px;
height:200px;
border:1px solid #666;
cursor:pointer;
margin-right:8.75px;
background-color:#FFF;
}
.ChatTitle {
width:100%;
height:30px;
line-height:30px;
font-size:13px;
font-weight:bold;
text-align:center;
background-color:#C6D6D9;
border-bottom:2px solid #9C0;
}
You can accomplish this using box-sizing:border-box. What it does is includes the padding and border sizes from the width, as opposed to its normal behaviour of adding to it (which makes the <div> overflow to the next line). I've added a div.Inner here which will have the border and white background while the .ChatRoom is used to provide space using padding.
jsFiddle
HTML
<div class="ChatRoom">
<div class="Inner">
<div class="ChatTitle">My Chat Room</div>
</div>
</div>
CSS
.ChatRoom {
float:left;
width:25%;
height:200px;
padding:8px;
box-sizing:border-box;
}
.ChatRoom .Inner {
border:1px solid #666;
box-sizing:border-box;
background-color:#FFF;
cursor:pointer;
height:100%;
}
Without border-box
Turns out it's pretty easy without border-box too, utilising margin on .Inner.
jsFiddle
.ChatRoom {
float:left;
width:25%;
height:200px;
}
.ChatRoom .Inner {
border:1px solid #666;
margin:8px;
background-color:#FFF;
cursor:pointer;
height:100%;
}
http://jsfiddle.net/DyTT8/1/
The last div needs to have the margin reset if not it will add to the 15px of padding. I did this by giving it class="last and making the .ChatRoom div 225px; This will give you the proper spacing.
You could also put the divs in an unordered list and target the last div with li:last-child and remove the margin that way.
I am trying to push down the boxes after the .slidetoggle panel is activated. But what happens is that it either goes over or under (depending on z-position) the positioned boxes. I want to it so that when the slidetoggle panel is activated, it will push down all of the boxes.
Here is the JSFIDDLE: http://jsfiddle.net/iqab/8QHdB/3/
And here is an example of the type of functionality I am talking about:
http://www.michaelnagy.at/
Replace the CSS with this. The modified lines are commented.
Other fixes applied (see comments in CSS).
.wrapper{
width:800px;
/*height:800px;*/ /*let wrapper auto resize itself based on contents height*/
border:solid thin #000;
position:relative;
margin:auto;
}
.wrapper .Boxes{
display:inline-block; /*fix for box overlap out of wrapper. replacement for "float:left" below*/
width:200px;
height:200px;
/*float:left;*/ /*fix for box overlap out of wrapper. replaced with "display:inline-block" above*/
border:solid thin #000;
margin:33px;
}
.wrapper .hbox{
width:734px;
height:400px;
border:solid thin #100;
/*position:absolute;*/ /*fix for panel overlap over boxes*/
top:33px;
margin:33px;
display:none;
background-color: #000;
}
I'm looking for a way for CSS(3) to be able auto adjust the width of a center container div between a float:left div and float:right div.
The center div also needs the ability to have a min-width set, similar to google+ -> home where the center content is auto fitted between the left navigation buttons and the right chat pane. Then when the screen width shrinks past a certain point (detected with javascript) the chat pane minimizes to save space.
Here is an active mock-up to make work: http://jsfiddle.net/9vrby/
Also, here is the css code I'm using now:
#left{ float:left; width:200px; height:400px; border:1px solid #000; }
#center{ float:left; width:auto; height:400px; border:1px solid red; }
#right{ float:right; width:100px; height:400px; border:1px solid blue; }
Please let me know if you need more information, and thanks in advance for the help.
On #center, drop float: left and add overflow: hidden. Also, #center needs to be moved to last in the HTML.
http://jsfiddle.net/thirtydot/9vrby/14/
This works in all modern browsers and even IE7.
One trick is not to use floats but display:table-cell.
http://jsfiddle.net/9vrby/8/
HTML:
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
CSS:
#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; }
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; }
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; }
Beware though, this method doesn't work in IE7 (and below, but who still supports that crap right?). But perhaps you can take a look at CSS3Pie which enables you to use CSS(3) for browsers that officially don't support it, like IE7. So perhaps display:table-cell will work aswell.
Use Firefox for this example. (Works fine in IE7)
I have narrowed down an example at: (Where you can do -> view source)
http://www.handbooster.com/example/tricky.html
The problem is that the clear:both attribute on the red div forces it below the left floated blue div. This might well be correct and expected behaviour as that is how FFX renders it.
My problem is that I need to find a way to make the red div be placed directly below "Subheading" BUT I cannot change the clear:both attribute no the red div (as in my case it is rendered by a 3rd party component.)
Is this possible or does the clear:both attribute on the 3'd part component make it impossible to use the component in a floated context as it interfers with other floated elements on the page ?
You can set
#content {
float: left;
margin-left: 0;
}
if it's alright to have the content div floated.
What if you position container relatively, and instead of floating the leftnav you position it absolutely?
#leftnav {
/*float:left;*/
position:absolute; /* New! */
left:0px; /* New! */
margin:0;
padding:1em;
width:160px;
}
#container {
position:relative; /* New! */
top:0px; /* New! */
left:0px; /* New! */
background-color:#FFFFFF;
border:1px solid gray;
color:#333333;
line-height:130%;
margin:10px auto;
width:90%;
}