When I create an HTML div element with no content, it disappears.
When the div is populated, like this HTML, then it works right.
<!doctype html>
<head>
<style>
.nav {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #FF0000;
}
.content {
width: 56%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #0000FF;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div class="nav"><p>nav</p></div>
<div class="content"><p>content</p></div>
</div>
</body>
</html>
I get the following (expected) output:
However, if I change the div element with the class = nav to no content:
<div class="nav"></div>
The red box disappears:
It's like there is no div there! How can I always have the program show the div with no content?
When the div is empty the element has no height. So what's actually happening is that it's there but has 0 height.
You could put something in it (like or give it height and/or line-height. I'd suggest giving the other div the same height.
Put a non-breaking space in it. That's what I do when I need something, but not nothing. You may also be able to give it an explicit height to get the same result.
Make sure the contains some kind of content. is usually the best. It ensures that there is at least something for the browser to display/render. This also might be a cause of your DTD.
Another thing that call cause this is improperly nested tags or tags that are not closed.
Make sure all tags are properly nested and closed.
This approach lets the div be empty, by using inline-block display. You force the height.
CSS:
.nav {
width: 26%;
height: 2em;
display: inline-block;
float: left;
background-color: #FF0000;
}
.content {
width: 56%;
height:2em;
display: inline-block;
background-color: #0000FF;
}
HTML:
<div style="width: 600px;">
<div class="nav"></div>
<div class="content"><p>content</p></div>
</div>
Alix,
you need to add a height value to the class .nav
<!doctype html>
<head>
<style>
.nav {
width: 26%;
height: 50px;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #FF0000;
}
.content {
width: 56%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #0000FF;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div class="nav"></div>
<div class="content"><p>content</p></div>
</div>
</body>
</html>
after you add a height value also add a display property to the nav class like:
height:1em;
display:block;
Related
When I place a fixed size display-block <span> element inside a <div> it causes a weird margin or padding (I don't know) at the bottom of the <div>. When there is text inside the <span> element, everything is fine. What's the reason for this? How can I fix it? I tested on Firfox and Chrome.
Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
</div>
<br>
<div class="outer">
<span class="inner"></span>
</div>
</body>
</html>
Update:
Floating would be an alternative to display-block elements. Perfectly valid, however I would like to understand what's wrong with display-block in this example. Also, it doesn't look like a white-space problem to me, as this would only affect margin to the left/right (correct me if I'm wrong).
It is because you are using inline-block;, this is the best example of how inline-block is different from floats
Demo
.outer {
background: grey;
padding: 4px;
overflow: hidden;
}
.inner {
float: left;
background: cyan;
height: 40px;
width: 40px;
}
inline-block leaves whitespace of 4px margin.
More Info
This hack works great for me.
Demo
.inner:after{
content: '\00a0';
}
inline-block is messing it up
If your intention of setting it as inline-block was to set a row of .inner's, set change the inner to block, and float left.
Then use a div with clear: both to fix the issue that normally the floating causes.
Here's your code modified:
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: block;
background: cyan;
height: 40px;
width: 40px;
float: left;
margin-right: 4px;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
<div class="clear"></div>
</div>
<br>
<div class="outer">
<span class="inner"></span>
<span class="inner"></span>
<div class="clear"></div>
</div>
</body>
</html>
It can be solved by setting the "line-height" of the outer element to 0. This solves pretty much every case.
Don't forget to make sure the inner element doesn't inherit that though, to do this you can just set it to "line-height:initial".
.outer {
background: grey;
padding: 4px;
line-height:0;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
line-height:initial;
}
I'm working on a webpage, and i have the width of my div tag set and am using margin: 0 auto; but my content is still on the left. I'm using OS X 10.7.3, Chrome 19.0.1084.46, and Dreamweaver CS6
here's my CSS:
#charset "UTF-8";
body {
text-align: center;
display: block;
}
.container {
float: left;
height: 2000px;
width: 964px;
margin: 0 auto;
text-align: left;
}
.header {
float: left;
height: 117px;
width: 964px;
}
.leftcol {
float: left;
height: 1715px;
width: 534px;
margin-top: 20px;
margin-right: 10.125px;
margin-bottom: 20px;
margin-left: 30px;
}
.navbar {
float: left;
height: 69px;
width: 964px;
}
.rightcol {
float: left;
height: 1715px;
width: 306px;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 20.25px;
}
.video {
float: left;
height: 301px;
width: 534px;
}
.pagebody {
float: left;
height: 1749px;
width: 920px;
background-color: #FFF;
margin-top: 0px;
margin-bottom: 21.25px;
margin-left: 22px;
}
And the HTML that uses the CSS:
<body>
<div class="container">
<div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
<div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
<div class="pagebody">
<div class="leftcol">
<div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
</div>
</div>
</body>
</html>
First of all,
You can't float left and margin auto horizontally. What's the point anyway. You want to have your container centered, not pushed to the left side.
Now that gives you trouble probably, because things don't work out as you'd want them to, because every other element you have there, is floated to the left.
Elements like your header and navbar shouldn't even be floated, they would be perfectly fine even if you didn't float them, they just need to be cleared. You need some reading to do.
Bottom line. When you're floating, you need to clear your floats after you're done with them.
Here is your reading material:
If it's the only thing you do, read at least The Great Collapse on CSS Tricks, but I'd suggest reading through it (and search for more, until it sticks)
http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html
Floats are very important to understand.
p.s. Don't define height on your container, you want that to be flexible, don't you ? I know you're defining the height, again, because you don't understand CSS floats fully. That's why you need to do the reading :)
Good Luck :)
Because you’ve also applied float: left;.
You should also start your source with a doctype declaration, such as <!doctype html>, and ensure your HTML is valid, as well as your CSS.
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
Edit: A note to anyone reading this, the whole reason it didn't work for me is because I was using DOCTYPE TRANSITIONAL. Which no change in HTML or CSS whatsoever, switching to DOCTYPE STRICT made it work. This is true for at least Chrome, FF, and IE8.
I have tried many many solutions offered online and none of them seem to work for me. I am trying to vertical-align an image inside a div (the image is already horizontal-aligned).
The image can be any width and any height (up to 70px) so I can't use a fixed margin or anything like that.
Here is my HTML+CSS:
<head>
<style type="text/css" media="all">
#list ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#list li {
border: 2px solid #DDD;
margin-bottom: 3px;
height: 110px;
}
#image {
width: 75px;
height: 110px;
line-height: 110px;
float: left;
}
#image img {
vertical-align: middle;
display: block;
margin: auto;
}
#event {
margin-left: 75px;
}
</style>
</head>
<body>
<div id='container'>
<div id="list">
<ul>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
You can't use vertical-align on a block element. An image is usually an inline element, but you have yours explicitly set to display: block. Remove that, and set the line-height of the parent div to the div's height.
Works here: http://jsfiddle.net/YnzR9/1/
#image {
width: 75px;
height: 100%;
float: left;
line-height: 110px;
text-align: center;
}
#image img {
vertical-align: middle;
}
Set the "line-height" of the div to the same value as the height of the div.
Update: Assuming you want the image vertically aligned and centered, use the following.
#image {
width: 75px;
height: 110px;
float: left;
line-height: 110px;
text-align:center;
}
#image img {
vertical-align: middle;
}
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}