I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).
Related
I have a page with some divs. My page is pretty dynamic where I am showing and hiding divs based on user input.
I want a footer to always appear at the bottom and to have the other divs above it appear in a scroll. Since my data is populated asynchronously, my view loads but then once the content is injected onto the page, my footer seems to move
Here's a simple example of what I'm trying to do:
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
try to add positions for footer
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
.footer
{
position:absolute;
bottom:0px;
}
in HTML
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
div.parent{
position:relative;
}
div.footer
{
position:absolute;
bottom:0px;
}
Looks like you are looking for the fixed footer at bottom. You can use position:fixed and apply positions like below.
.footer {
position:fixed;
height:20px;
background:#ccc;
bottom:0;
left:0;
right:0;
text-align:center;
}
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
Sometimes, HTML/CSS just drives me crazy ;( ... Hopefully someone can explain this behavior and maybe how to fix it.
See HTML/CSS below or this sample JSFiddle
So what I'm doing is having a header and body div, both with floating divs inside, and using clear: both; so the container div spans over the floating inner divs. In my real code I use a more complex clearfix class, but the problem is the same.
The body has a foregrond color BLUE. For the header-div, I set a foreground of WHITE. What drives me crazy is that the foreground-color gets also applied to the body-div even if it is not contained within the header-div. How can this happen?
In my real code I have even a problem that when I explicitely set the foreground for the body-div to BLUE, the color in the header-div also switches to blue. I cannot reproduce it with this JSFiddle but if I understand this problem I can reproduce in this sample code here, maybe I also understand the other problem :)
HTML:
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" />
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
CSS:
body {
color: blue;
}
div#head {
background-color: gray;
width: 400px;
color: white;
}
div#body {
background-color: lightgray;
}
.headleft {
float: left;
}
.headright {
float: right;
}
.feature
{
float: left;
margin-right: 10px;
}
Thanks for any help understanding this issue!
EDIT
Sorry by editing the pasted code I messed up the sample and removed a closing DIV. I corrected this now, the issue was not the missing closing DIV.
You forgot the closing tag on the head div.
http://jsfiddle.net/UHXr6/2/
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
The problem with your HTML was that you were incorrectly closing the div tags. You can't close div's like this: <div/>. You must use <div></div>. Please see this working Fiddle.
You are missing a closing <div> for head
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
I want to know how to implement a strip of scrolling div boxes in a horizontal line which spans in full width of the browser.
<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
I tried but after 4 or 5 block it is not hiding behind the browser instead it brakes to a new line
In your CSS add display:inline and white-space:nowrap;
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}
Here is about white-space. More detailed explanation
Here's a fiddle with a demo of what you want:
http://jsbin.com/anekos/1/edit
New CSS:
.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;
Use percentages for the width of each block so it will fit the width of your browser.
You need to set a width on the div with the class of "block_box"
try applying overflow-x: scroll; css style to your .block_box div.
Try to put an outer div with fixed width. And then use overflow-x:auto property like this
HTML Code :
<div class="outer_div">
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
</div>
</div>
CSS :
.block_box{height:200px;width:800px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:100;height:200px;background:grey;margin:10px;padding:20px;}
.outer_div{ width: 500px; overflow-x:auto;}
Here is the working demo : http://jsfiddle.net/AQr6h/2/
I'm abysmal at HTML so looking for some help in recreating the following. I could do it with a table, but understand that that is a no-no nowadays. So advice is needed.
alt text http://img130.imageshack.us/img130/8623/4panel.jpg
What I am wanting to achieve is four fixed size boxes then spread across the page on a single row. These boxes will have some information in them, possibly text, possibly images and possibly both.
The boxes will be static size, ie I don't want them resizing to fit the width of the browser window. I'm guessing it probably going to be done with the div tag but I don't have the first clue where to start.
You want something like this (not tested)
<div id="wrapper">
<div id="box1" class="box">
<!-- your content here -->
</div>
<div id="box2" class="box">
<!-- your content here -->
</div>
<div id="box3" class="box">
<!-- your content here -->
</div>
<div id="box4" class="box">
<!-- your content here -->
</div>
</div>
with the CSS
.box{
width: 200px;
margin-left: 20px;
float: left;
}
#box1{
margin-left: 0;
}
#wrapper{
margin: 0 auto; // Center on the page
width: 860px;
}
You can use four fixed-width/height divs which are all set on float:left;.
<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>
with this css:
.box {
width: 200px;
float: left;
}
Well, it's not so tricky:
<div class="panelwrapper">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
That's really all the HTML you should need.