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
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
I'm having problems getting the background formatting to work with my and tags. The text I type is showing up and formatting like I want, but I want the white background and border to extend down too. I've tried a couple things, including doing away with the #bodywrapper and extending the #headerwrapper by adding a height. I'd rather not do this, but I guess I will if I have to. If I add a paragraph within the #bodywrapper, but outside of the section or aside tags, it works correctly. Why isn't this working?
Here is my code:
CSS:
#headerwrapper {
width:80%;
height:auto;
margin-top:.5em;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background:#FFFFFF;
border-top-left-radius:.625em;
border-top-right-radius:.625em;
border:1px #000000 solid;}
.header {
width:100%;
height:10em;
margin:0;
border-bottom:3px #4E5E78 solid;}
img {
float:left;
margin-top:1.5em;
margin-right:1em;
margin-bottom:1.4em;
margin-left:1em;}
#bodywrapper {
width:80%;
height:auto;
margin-top:0em;
margin-right:auto;
margin-bottom:2em;
margin-left:auto;
background:#FFFFFF;
border-bottom-left-radius:.625em;
border-bottom-right-radius:.625em;
border:1px #000000 solid;}
section {
width:60%;
float:left;
margin:auto;}
aside {
width:40%;
float:right;
margin:auto;}
HTML:
<body>
<div id="headerwrapper">
<div class="header">
<img src="images/headerlogo.png" alt="Digital Billboard Guru" />
<h1>Call Now For Your<br />FREE Consultation<br />(000)000-0000</h1>
</div>
</div>
<div id="bodywrapper">
<section>
<p>Test</p>
</section>
<aside>
<p>Test</p>
</aside>
</div>
</body>
</html>
Add overflow:auto into the tags so that u don't have to adding the height.
I hope this is what you want.
Try adding overflow:auto to the #bodywrapper.
Fiddle
Im trying to create a header of a website that has the logo left aligned, a navigation div that is 960px wide and centered and a log in area that is right aligned.
Here is a screen shot of my progress
The issue is that the login breaks to a new line and I don't know how to prevent it. Floating the elements doesn't work.
Here is a Fiddle
But it doesnt produce the same results I'm seeing when I run it locally.
HTML
<div id="header"><!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
</div>
CSS
/*Header Options*/
#header{
width:100%;
background-color:green;
height:125px;
}
#logoHolder{
float:left;
}
#navigation{
width:960px;
background-color:blue;
margin-left:auto;
margin-right:auto;
}
#loginHolder{
float:right;
}
Just re-order your HTML to the following (move loginHolder above navigation) and it works fine:
<div id="header">
<!-- Outside Container, Holds Logo and Log In -->
<div id="logoHolder">
<p>logo</p>
</div>
<div id="loginHolder">
<p>login</p>
</div>
<div id="navigation">
<p>navigation</p>
</div>
</div>
jsFiddle example
You've got to be careful with widths. The navigation width is overwhelming the other divs. And, if I'm not mistaken, div has a built in line break. the answer above has one solution, I played with a couple edits also: you can copy in this css:
/Header Options/
header {
width:100%;
background-color:green;
height:125px;
}
logoHolder {
width: 100px;
background-color: red;
float:left;
}
navigation {
width:344px;
background-color:blue;
float:left;
}
loginHolder {
width:100px;
background-color:yellow;
float:left;
}
How do I remove the whitespace found at website.com underneath the elements div is like 730 px of whitespace. I've been fiddling around with my css code for over an hour now. I can't seem to isolate the problem
HTML:
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
CSS:
div.element img:nth-of-type(1){
padding-top:80px;
}
div.element div:not(:nth-of-type(1)){
position:relative;
width:auto;
height:auto;
bottom:375px;
}
div.element img{
position:relative;
right:198px;
padding-right:56px;
border:none;
}
.Projecttitle{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 22px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
padding-top:15px;
}
#Projecttitle{
position:relative;
bottom:162px;
width:410px;
height:155px;
left:226px;
}
.Projectdescription{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 17px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
}
#Projectdescription{
position:relative;
bottom:290px;
width:410px;
height:155px;
left:226px;
z-index:0;
}
First of all, you have an unclosed div tag. the second div.element is nested inside of the first one, when they are obviously supposed to be siblings. When you fix this, the problem will become more obvious. You are also using way too much relative positioning. This confuses the issue more because the appearance of the element on screen changes, but the space it 'occupies' in the document flow does not.
<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?