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/
Related
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
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/
I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.
CSS:
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;
}
.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="Main">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?
The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo
edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)
This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.
DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
overflow:auto;
}
Another way around this is to add a transparent border around the main div (stops margin collapsing)
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
border: thin solid transparent;
}
The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
padding-top: 1px;
margin-top: -1px;
}
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)