Its a bit of a tough one to explain really.
this is it:
<div id="inside-cntr">
<!--GAME CONTENT GOES HERE!-->
<div style="position:relative; margin:15px; margin-top:35px; margin-bottom:20px; padding:1px; width:200px; height:200px; display:inline-block; float:left; background-color:#333;"></div>
<div style="position:relative; margin:15px; margin-top:35px; margin-bottom:20px; padding:1px; width:200px; height:200px; display:inline-block; float:right; background-color:#333;"></div>
<!--GAME CONTENT GOES HERE!-->
#inside-cntr { position:relative; width:760px; height:auto; min-height:50px; margin:0px; background-image:url(../images/global/main-content-inner.jpg); background-repeat:repeat-y; background-position:center; z-index:10; clear:both; }
What is happening is that the two div test blocks do not sit inside the expanding div container when both blocks have float attributes.
Also, i'm not too sure why I have to put such large margins to position the div blocks too?
#inside-cntr { overflow:hidden; zoom:1; }
Explanation: http://work.arounds.org/clearing-floats/
Related
I have 5 <div> tags on my page.
container <div>
header <div>
left panel <div>
middle panel <div>
right panel <div>
The left panel, middle panel and the right panel <div> are placed side by side using CSS float left. Now the problem comes when the fetched data is displayed in the middle panel <div> and its height starts increasing according to the amount of fetched data. Left panel <div> stays where it suppose to be but the right panel <div> changes its margin as shown in the figure.
This image explains the exact situation. Below is my CSS.
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
}
.left_panel{
width:130px;
float:left;
}
.middle_panel{
width:70%;
float:left;
}
.right_panel{
float:right;
width:130px;
}
Please help me out with this. Thanks.
I think the issue is being caused because the combined width of your left, middle and right panels are exceeding the width of your page.
Try something like my fiddle where I have set the width of the left and right panels to 15% so under no circumstance will they exceed 100%
.left_panel {
width:15%;
float:left;
background: yellow;
}
.middle_panel {
width:70%;
float:left;
background: blue;
}
.right_panel {
float:right;
width:15%;
background: pink;
}
http://jsfiddle.net/WPgt9/
Hope this helps
HTML
<div class="container">
<div class="header">Header</div>
<div class="left_panel">Left</div>
<div class="middle_panel">
Middle
</div>
<div class="right_panel">Right</div>
</div>
CSS
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
background-color:green;
}
.left_panel{
width:15%;
float:left;
background-color:red;
height:400px;
}
.middle_panel{
width:70%;
float:left;
background-color:blue;
height:500px;
}
.right_panel{
float:right;
width:15%;
background-color:red;
height:400px;
}
Fiddle http://jsfiddle.net/WPgt9/9/
So, one more question.
How come that div with phone# image goes below parent div? I tried clear. Didn't help. I tried absolute positioning parent "pics", but it threw everything to the left.
See here
<div id="angies"></div>
<div id="est"></div>
<div id="pics">
<div id="logot"></div>
<div id="house"></div>
<div id="phone"></div>
</div>
#angies {height:124px;
width:347px;
margin-right:0px;
margin-top:0px;
float:right;
background-image: url(images/ang.jpg);
background-repeat:no-repeat;}
#est {height:16px;
width:165px;
margin-left:5px;
margin-top:5px;
background-image: url(images/est.jpg);
background-repeat: no-repeat;}
#pics {height:175px;
width:878px;
border:1px solid;
margin-left:auto;
margin-right:auto;}
#logot {height:169px;
width:360px;
border:1px solid;
float:left;
margin-bottom:0px;
background-image:url(images/logot.jpg);
background-repeat:no-repeat;}
#house {height:169px;
width:166px;
border:1px solid;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-image:url(images/house.jpg);
background-repeat:no-repeat;}
#phone {height:43px;
width:312px;
border:1px solid;
position:relative;
margin-bottom:0px;
margin-left:526px;
position:static;
background-image:url(images/phone.jpg);
background-repeat:no-repeat;}
p.s.
and how come these divs are going to the top with bottom margin of 0 pixels? It doesn't bother me this very moment, but i still want to know how come.
simple solution is make all of them float: left
#house { float: left; }
#phone { float: left; }
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
Here's the code i'm working with.
http://jsfiddle.net/qLjgM/2/
Basically, as the browser window is resized (getting smaller). I'm trying to force the 2 divs (MIDDLE 2-COLUMN and MIDDLE 3-COLUMN) to resize untill it hits a minimum size width of 200px for MIDDLE 3-COLUMN and 300px for MIDDLE 2-COLUMN.
#wrapper {
margin:0 auto;
width:100%;
max-width:500px;
}
#content-pad {
width:100%;
max-width:500px;
margin:0px;
background:#CCC;
font-size:12px;
}
#left-col {
float:left;
width:100px;
margin-top:12px;
background:#CCC;
}
#mid-col {
float:left;
width:100%;
min-width:200px;
max-width:270px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}
#mid-col-wide {
float:left;
width:100%;
min-width:300px;
max-width:385px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}
#right-col {
float:left;
width:100px;
margin-left:15px;
margin-top:12px;
background:#CCC;
}
I'm using float to align them inline so to speak, but it gives me trouble with the columns to the right just snapping below the LEFT SIDE and I want to avoid that as well.
Any help would be greatly appreciated.
The problem is that you're giving your floats a width of 100% of their parents, which is #content-pad. This fails to account for the space taken up by #left-col, and therefore the floats are too wide to flow as you'd like. Try something like this, with fewer floats:
http://jsfiddle.net/qLjgM/5/
#wrapper { margin:0 auto; width:100%; max-width:500px; }
#content-pad { margin:0px; overflow: auto; }
#left-col { float:left; width:100px; margin-top:12px; margin-right: 10px; }
#mid-col { min-width:200px; margin-left:15px; margin-top:12px; }
#mid-col-wide { min-width:300px; margin-left:15px; margin-top:12px; }
#right-col { float:right; width:100px; margin-left:15px; margin-top:12px; }
<div id="wrapper">
<div id="content-pad">
<div id="left-col">LEFT SIDE
<br />
<br />
<br />
</div><!-- //left-col -->
<div id="mid-col-wide">MIDDLE 2-COLUMN</div><!-- //mid-col -->
<div id="right-col">RIGHT SIDE</div><!-- //mid-col -->
<div id="mid-col">MIDDLE 3-COLUMN</div><!-- //mid-col -->
</div><!-- //content-pad -->
</div><!-- //wrapper -->
<style>
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
position:relative;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
background:#00FFFF;
}
.body_content{
width:900px;
height:500px;
float:left;
padding:0px;
margin:0px;
background:#6666FF;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
background:#336600;
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</div>
</div>
Since you float everything in the wrapper, the browser won't pickup the size of your wrapper div, ie, it consider it has 'zero' height.
Solution:
use the magical overflow keyword in wrapper:
.wrapper{
overflow:auto;
//...
}
This is what I see:
What are you expecting?
#sridhar ,
For div the background color should be given like this right
background-color:#003366 and background image sould be given like this
background-image: url(../images/test-background.gif);