Hey I was just trying to put two divs beside each other, like I've done hundreds of times by using "float: left" but it's simply not happening. The second div just sits below the first.
Here's the code:
<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">
Right
</div>
<div id="box2" class="greybox">
Left
</div>
</div>
and the css:
#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
Any help would be much appreciated.
You're missing a double-quote around your "wrapper" id.
I discovered this by attempting to make a fiddle out of your code, which highlighted the error. (Hint: make a fiddle for us next time)
You also had some errors in your CSS, and your widths were all weird.
Fixed:
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box2" class="greybox">Left</div>
<div id="box1" class="greybox">Right</div>
</div>
#box1 {
margin-top: 70;
margin-left: 85;
width: 200px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 40px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
You can either float both boxes left to have them side by side, or float one right.
Why something will happen? item's auto float is left.
Maybe you mean to
float: right;
try this one ^^
Usually this is a problem when the width of the second element will not fit horizontally within the parent. Does the greybox class add any padding?
Also, in your paste the wrapper id is missing a quote. This would give the parent no width if it was styled via a stylesheet include rather than inline and yield the problem I describe.
Also, the box1 styles have a syntax error in padding. All styles below wouldn't take effect. This should be your fix.
You have lots of typos in your code. Missing double quotes and semicolons. Additionally you forgot many times to give your values also an unit (like px).
If you'll fix all these errors all work as expected - see jsFiddle
why u put overflow:hidden to #box1 and #box2 ? do u know the use of {overflow:hidden;}
u already put overflow:hidden to main wrapper
see this
<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1" class="greybox">
left
</div>
<div id="box2" class="greybox">
Right
</div>
</div>
and the css
#box1 {
margin-top: 70px;
margin-left: 85px;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
background:orange;
}
#box2 {
margin-top: 70px;
margin-left: 30px;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
background:green;
float: left;
}
see the jsfiddle
You should clean that code up mate. Lots of errors, missing (px's), semicolons, quotes, etc...
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">Left</div>
<div id="box2" class="greybox">Right</div>
</div>
#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px; /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}
#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}
Demo : http://jsfiddle.net/ZFTzY/5/
Related
I have 5 <div> elements and they all float left.
How can I push UP my last div? (i cant use 2 more wrappers because they will be re-sized with jQuery, all 5 of them must be in same wrapper)
I don't know if I explain my problem in a right way so if you have question, please ask.
HTML:
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">3</div>
<div class="kocka220x300">4</div>
<div class="kocka460x140">5</div>
</div>
CSS:
#ModeliSadrzajAir {
width: 960px;
margin: -60px 0px 0px -10px;
min-height: 500px;
background-color: #00FFFF;
position: absolute;
z-index: 1000;
}
.kocka220x140 {
border-radius:5px;
width: 220px;
margin: 10px;
height: 140px;
float: left;
background-color: #FFFF00;
}
.kocka220x300 {
border-radius: 5px;
width: 220px;
margin: 10px;
height: 300px;
float: left;
background-color: #FF0000;
}
.kocka460x140 {
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
}
Fiddle
You've to set your .kocka220x300's float property from left to right
I also suggest you to change your html to this
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">4</div> <!-- This comes first -->
<div class="kocka220x300">3</div> <!-- This comes second -->
<div class="kocka460x140">5</div>
</div>
This way, your 3 is on the left side of 4, check the fiddle link for the update
You can try this http://jsfiddle.net/modaloda/czz2Z/9/
.kocka460x140
{
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
position: absolute;
top: 160px;
}
I tried to reproduce your example.
Basically I think you need one wrapper with position:relative; that contains all divs and make the 5th div position:absolute; and bottom:0px;. Also add overflow:auto; so that the max height you have contained in your parent div will push the parent div's height (read it again you will understand :P).
Check this fiddle:
http://jsfiddle.net/R8hJ3/1/
Have You Tried Some plugins like Grid-a-licious..
if not try it out.. Else if you need a pure Css you could have a look the link below..
jsfiddle.net/chermanarun/HaV29/
I'm struggling to set an img's height inside a div to be taler than the other img's on the rest of my site, can anyone advise, thanks
Here is the HTML
<div class="project">
<img src="../../../Images/Nu Space/Nu Space LH.jpg" alt="Nu Space LH" class="image" height="auto" width="580">
<img src="../../../Images/Nu Space/Nu Space BC.jpg" alt="Nu Space BC" class="image" height="auto" width="580">
<div class="clear"></div>
</div>
Here is the CSS
img {
float: right;
margin-top: 0px;
height: auto;
}
img li {
margin-top: 75px;
height: 100%;
width: 100%;
}
.project {
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
Any help would be appreciated
try this one,
.project
{
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
.project .image1
{
width:200px;
height: 200px;
}
http://jsfiddle.net/tT8JH/2/
div > img {
width: (desired width in %);
height: (desired height in %):
}
Edit: Sorry I was not exact in my explanations, but this will change only the images inside a div, which was what the author wanted. I believe he has other images on the webpage, which should have different size.
I'm working on a blog layout, where some info (blue box) is taken out from the post's body like this:
http://jsfiddle.net/rhr96/
What is the best of doing that?
Currently I'm doing:
position: absolute;
margin-left: negative value;
to flow the blue box to the left.
But I could also do:
position: relative;
float: left;
right: some px;
Any of these considered better? Or are there any other method?
Short Answer: POSITION ABSOLUTE
Reason: Designers use position: absolute because that is the right way to take out the element from the normal document flow, using float: left; wont take out the blue box out of the document flow...
Edit: Just understood what you actually wanted, here I've made a new 1, you can check it out..
Demo
HTML
<div class="container">
<div class="block">1</div>
<div class="content">This is a question</div>
</div>
CSS
.container {
height: 200px;
width: 500px;
border: 1px solid #eeeeee;
margin: 30px;
position: relative;
font-family: Arial;
}
.block {
position: absolute;
height: 80px;
width: 60px;
background-color: #eeeeee;
top: 10px;
left: 10px;
font-size: 36px;
text-align: center;
}
.content {
width: 410px;
float: right;
margin: 10px;
font-size: 18px;
}
I think the best way of doing this, may actually be this (well, I say best, I guess that's a matter of opinion in most cases)
HTML:
<div class="container">
<div class="outside">
hi
</div>
<div class="inside">
<p>Blah blah blah</p>
</div>
</div>
CSS:
.container { margin: 20px auto; width: 400px; }
.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }
Obviously you can repeat this multiple times on the same page (as I imagine you may if this is for blog posts)
EDIT: My answer uses floats to take the element out of the normal flow, the use of overflow: hidden on the content means that it doesn't wrap underneath the floated element.
(If you don't know much about overflow I'd suggest reading about it, it can be useful for all sorts of things, e.g. float clearing)
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 container layer with a width of 850px. Inside of that i have 4 layers displayed as inline-blocks floating left, each of which are 100px high and 200px wide.
How can i space them so the outside ones line up at the edges of the container div but are spaced evenly within?
css
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background-color: #09F;
}
html
<div id=content>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
It's not really going to work, because you have a container that's 850px wide and you're trying to spread 4 200px wide containers with three gutters between them. 4*200 = 800 so you have 50px spread in which to split 3 gutters 50/3 is 16.6666ish which isn't going to work for pixels.
The following works, but I don't know how useful it is for you.
#content {
width: 848px;
margin-right: auto;
margin-left: auto;
background: #666;
overflow: hidden;
}
#featured {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
#featured.first { margin-left: 0px;}
<div id=content>
<div id=featured class="first"></div>
<div id=featured></div>
<div id=featured></div>
<div id=featured></div>
</div>
There are a couple of ways to do this. One cross-browser solution I have found is to use an extra wrapper div and get creative with it's true dimensions and negative margins.
<div id="content">
<div class="kludge">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>
</div>
I changed id=featured to a class name because ids should be unique if you want your HTML to be valid.
The CSS:
#content {
width: 850px;
margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
width: 900px; /* create room for the right hand margin of last item */
margin-right: -50px;
}
.featured {
display: block; /* inline-block not necessary for floated elements */
height: 100px;
width: 200px;
float: left;
margin: 0 10px;
background-color: #09F;
}
I think the easiest way is:
<style>
#content {
width: 850px;
margin-right: auto;
margin-left: auto;
border:1px solid #000
}
#featured1 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 0px;
margin-top: 10px;
background-color: #09F;
}
#featured2 {
display: inline-block;
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
</style>
</head>
<body>
<div id=content>
<div id=featured1></div>
<div id=featured2></div>
<div id=featured2></div>
<div id=featured2></div>
</div>
Maybe not what you need, but If IE6 support is not important pseudo selectors are perfect for this, and avoid any HTML fudges (tested in IE7, FF3.5):
CSS:
#content {
width: 848px;
margin: 0 auto;
overflow: auto;
}
.featured {
height: 100px;
width: 200px;
float: left;
margin-left: 16px;
margin-top: 10px;
background-color: #09F;
}
.featured:first-child {
margin-left: 0;
}
HTML:
<div id="content">
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
<div class="featured"></div>
</div>