I'm trying to create a grid with columns. The problem is that once a column is bigger than the other, the next column won't float to the left anymore. Is there anyway I can fix this?
The code for the column is simple:
.column { width: 320px; float: left; }
I want to avoid defining a height or use a float: right.
Thank you
Adding clear fix by using nth-child could be a solution.
.column:nth-child(3n+1) {
clear: both; /* on row 4,7,10,13,16... */
}
Demo: http://jsfiddle.net/0nxb6xnL/
It seems it is happening for different height. Can you make the height identical and try again?
Like
.column { width: 320px; height: 200px; float: left; }
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 want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
I'm trying to make a 3 column responsive form with rows that can use merged cells like an html table.
The problem I'm running into is that because of the margin on each column using a width of 30/60/90% doesn't align up with the row above it.
I created an example here (see row 1 and row 3):
https://jsfiddle.net/5ktkxres/2/
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: 60%;
}
I know its a simple fix but I can't find the solution, thanks in advance.
Or try CSS calc:
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: calc(60% + 10px);
}
https://jsfiddle.net/5ktkxres/10/
Make sure to take into consideration the margin on each side of each input. If you have a threeFormBlock at 90%, you will need to add 20px due to right margin on input one, both margins on input two and left margin on input three.
The quickest fix I can see is to change the margin to 1% and then add that to the width of .twoformblock. Like this:
.formBlock {
margin: 5px 1%;
}
.twoFormBlock {
width: 62%;
}
I think the best way is to use Bootstrap for that. (I know it is a "lazy" solution).
I'm trying to render a 3 column design with the following :
middle fixed width at 660px
left and right half of the remaining but with min-width : 120px
middle div should be centered on the screen
Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite.
I've partially achieved my goal using
display: inline-block;
vertical-align: top;
Here's the fiddle.
What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.
Use calc to achieve this.
It is a native CSS way to do simple math right in CSS as a replacement for any length value.
Please note that calc does not work with all browsers.
Write:
#left, #right {
min-width:120px;
width:calc(50% - 330px); // half of 660px
}
As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.
See updated fiddle here.
http://jsfiddle.net/hdt75/
.fenetre {
text-align: center;
width:1200px;
background-color: grey;
margin: 0 auto;
}
If you want table-like behavior, you should use display: table-cell in your CSS:
.fenetre {
display: table-row;
}
.section {
display: table-cell;
}
#right {
width: 50%;
}
#middle {
min-width: 660px;
max-width: 660px; // just 'width: 660px' won't be enough here
}
#left {
width: 50%;
}
http://jsfiddle.net/mblase75/zL9cn/
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.