<style>
div{
height:100px;
}
#wrapper{
position:relative;
}
#navigation {
position:relative;
width:400px;
background-color:black;
float:left;
}
#content{
width:2300px;
background-color:red;
padding-left:500px;
}
#iframe{
background-color:green;
}
</style>
<div id="wrapper">
<div id="navigation">
sss
</div>
<div id="content">
<div id="iframe">
content
</div>
</div>
</div>
In browsers like IE8,FF #content div is coming inline with navigation in IE 7 content div is coming down.
I am looking for solution of this issue ine ie7 Thanks for all your help
had similar problem. got solved the issue thanks to user VinayC. I'm sure this will help u too. solution is relative positioning. check this link: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
In IE the #content is coming down because the width of that element is greater than the window/body. But I'm not sure if this is same with IE9.
To solve this add a width to the #wrapper that is greater than the width of #navigaton + #content.
#wrapper{
position:relative;
width: 2800;
}
Also why do you have such a long width and padding for the #content?
Related
I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
This is my layout - I use this for 2 pages.
I need to be full height (100%) and flexible height in same time.
Red block is empty, only a title/subtitle and full bg (cover) image.
In right side I have small text for first page, and a lot of text for 2nd page, this is why I need to be fluid.
I tryied more methods but I can't make it work.. and I don't want to use js - only pure css2.
Can someone help me? thanks.
One possibility to achieve what you want would be to use display:table & display:table-cell:
#content {
width: 100%;
display: table;
}
#left, #right {
width: 50%;
display: table-cell;
}
DEMO
You could also work with flex-box.
Flexbox guide
It will work if you want change the height of .top and .bottom remember that change the value of var heighs this is (.bottom .top) height
Java script (jquery)
<script type="text/javascript" src="http://www.designerbh.com/index_files/jquery-1.9.1.min.js"></script>
<script>
setInterval(function(){
var heights=$("body").height();
var heights=heights-100;
console.log(heights);
$(".red ,.gray").css({'height':heights});
},100);
</script>
Html
<body style='margin:0px'>
<div class='top'>
</div>
<div class='red'>
</div>
<div class='gray'>
</div>
<div class='bottom'>
</div>
</body>
Css
<style>
.top{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
.red{
float:left;
width:50%;
height:100%;
background:red;
}
.gray{
float:left;
width:50%;
height:100%;
background:#ccc;
}
.bottom{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
</style>
I just recommend you using Bootstrap and you dont need to be worried about - Check out their griding getbootstrap.com
I need some help, this is bothering me...
I have the following DIV structure:
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
</div>
And the following CSS code to style it:
body, html {
height:100%;
margin:0px;
padding:0px; }
#principal {
width:1000px;
height:100%;
margin:0px auto; }
#colIzquierda {
width:250px;
float:left; }
#colDerecha {
width:750px;
float:right; }
I have a problem when I fill for example #colDerecha with lots of content, and it overflows the height of the windows of my browser, then I can see something like this:
Where the dark grey = #principal, light grey = body, green = #colDerecha.
How can I make #principal gain the same height as #colDerecha always, when #colDerecha content is bigger than the screen size?
I don´t know if I explain myself enough...
Please some ideas? I have tried adding height:100% to both #colIzquierda and #colDerecha, but does not do what I want. It overflows the same, but in other way...
A common approach would be to change the display of the parent element, #principal, to table, then set the display of the children elements to table-cell. In doing so, #colIzquierda and #colDerecha will fill the remaining space.
Example Here
#principal {
width:100%;
height:100%;
background:gray;
display:table;
}
#colIzquierda {
width:25%;
display:table-cell;
}
#colDerecha {
width:75%;
display:table-cell;
background:gold;
}
<div id="principal">
<div id="colIzquierda">Some Content</div>
<div id="colDerecha">Some Content</div>
<div style="clear: both;"></div>
</div>
Why use the PHP tag in your question ?
I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
I have this kind of html code :
.content { background-color:#3C2B1B; overflow:auto;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}
<div class="content">
<div class="menu">
Menu
</div>
<div class="main">
Main
</div>
</div>
It works nicely on IE and Chrome, but on Chrome, if I refresh the page quickly, sometimes the whole content div go hide.
If I remove overflow:auto; I get rid about this problem, but of course I lost the background color.
Is it a common issue? Or what? And how can I fix it?
P.S. Chrome version is 8.0.552.237
.content { background-color:#3C2B1B;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}
.clear {clear:both}
<div class="content">
<div class="menu">
Menu
</div>
<div class="main">
Main
</div>
<div class='clear'></div>
</div>
This is a little trick i use when working with floating elements. adding the empty div with the clear both css will keep the .content div from collapsing
I hope it works for you :)
by setting css for div inner elements as
display:inline
i resolved this