I am trying to make my divs display vertically (beneath each other) but I am having no luck, I really can't think of the problem, any help is appreciated.
Here is a JSFiddle
I also tried this:
#div1 {
float: right;
}
#div2 {
float: right;
clear: right;
}
with no luck
My problem was that I had typos in my HTML and CSS
Related
Hi so I want to make a column based grid (two-column) using float and clear.
The idea is to give left block a float:left and clear:left,
while giving right block a float:right and clear:right.
.left-block {
float: left;
clear: left;
}
.right-block {
float: right;
clear: right;
}
But it turns out this is not working. Can you tell me why this won't work?
Jsfiddle link
And why does this one work perfect.
It is not possible for the floating elements to get above the preceding element on the other side (because it's cleared). So there's no way to get the right stacking effect with only using floats.
For further understanding how floating and clearing works in detail I'd recommend reading the specification.
The only way so far to get the masonry layout without additional containers is using CSS columns. You can find an example here.
I'd just have the floats for the divs you're making and add the clear on the containing container so it blocks it out. This is untested off the top of my head but hope it works.
CSS:
.wrapper {
width: 70%;
}
.wrapperClear {
content: "";
display: table;
clear: both;
}
.left-block {
float: left;
width: 50%;
}
.right-block {
float: right;
width: 50%;
}
HTML:
<div class="wrapper wrapperClear">
<div class="left-block"></div>
<div class="right-block"></div>
</div>
I am having some difficulty getting this inline-block div to center align properly as the two elements above it do.
The div which I am referring specifically to is the one which contains the three "social" icons at the bottom section underneath 'Interact with me' (please see here)
I assume that it is the float on the icons that is throwing it off whack which is why I have the wrapper div around it (.interact-social) to try to offset it, but it doesn't seem to be working as it should...? have already spent the better part of the day just trying to figure it out, to no avail.. :(
Any assistance greatly appreciated as usual, thanks!
edit:
Here was the relevant code for anyone interested:
.social {
height: 50px;
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
was simply missing a width declaration (which I had unsuccessfully tried apply to other divs)!
Add this to your code:
.social
{
width:240px;
}
Try making these changes to your css:
.interact {
width:95%;
}
.social li {
float:left;
}
.interact-social {
/*width:30%; Remove this width */
}
http://gunzhaxplz.com/transitions/example2/index2.html
I want my layout to look like this with variable size div tags on the left and right edges how would i style the left and right sides to do this please help
important styles i used:
.rightside {
margin-left:200px;
float: right;
}
Is this what you are looking for? with alternate float right's: http://jsfiddle.net/itz2k13/CTKPJ/
.right{
float: right;
}
div{
clear: both;
}
this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...
I am using float and then clearing both. but still i have getting some error in the layout. can some one point out what the problem is ?
http://uniquedl.com/3closets/about.html
i want Sneak-peek control div and sneak peek products div to be next to each other. i am using this code to make it next to each other
.grid {
display:inline;
float:left;
}
But sneek-control is taking a lot of margin to the left and not sitting below the above div block
i want the layout to look like this
If you set a height on your .intro-image to 384px same size as image it should work.
.introduction .intro-image {
width: 288px;
height: 384px;
}
.sneak-peek {
clear: both;
float: left;
height: 288px;
text-align: left;
}
should do it.
You also have some problems there... check IE 7 after you finish. Probably they'll clear out by themselves.