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;
}
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 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
Im trying to position the 3 phone icons to the bottom right. Underneath the bottom right image.
Fiddle Here
Just when I think I have it by using for example margin-left xxpx, etc the images move over but then go vertically aligned. What is best practice for positioning something anywhere you want it?
.imgs {
display:inline;
margin: 0px auto;
margin-left: 1002px;
}
use
.images {
float:right;
}
or
.imgs {
float:right;
display:inline-block;
}
in second case you can give spacing between two images also. margin-left:10px;
.images > div {
display: inline-block;
float:right
}
I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.
What I try to do is easy for people with knowledge.
Make a 3 column fluid layout that cover the whole screen.
Left column should be 230px width, fixed, height 100%.
Center column and right column should be equal width.
For both center - and right column they have to "float" into each other
Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.
That is my problem.
center and right column need to be close to each other - no gap.
How can I solve this?
You can see my attempt here: Fiddle
Just zoom out, and you see the problem straight away. Need help to fix this. How?
Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.
I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.
You mean something more like this: http://jsfiddle.net/gbRzM/?
(uses left, right and width properties to position everything)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.right {
right:0;
width:30%;
position:fixed;
background: RED;
}
.center {
left:230px;
right:30%;
position:fixed;
border:1px solid;
background:YELLOW;
}
Or more accurately this: http://jsfiddle.net/HKJvP/?
(puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.notleft{
left:230px;
height:100%;
right:0;
position:fixed;
}
.right {
right:0;
width:50%;
position:absolute;
background: RED;
}
.center {
left:0;
width:50%;
position:absolute;
border:1px solid;
background:YELLOW;
}
give a fixed width to the parent element of three columns and add class clearfix
``
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
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.