This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 7 years ago.
Need some help with the CSS for generating a grid of perfect squares. Div's look like this, but I'd like to have each of them look like a perfect square - not a rectangle. Setting width and height in css doesn't do it. :-\
<div class="square" /> ... <div class="square" /> <div class="linebreak" />
<div class="square" /> ... <div class="square" /> <div class="linebreak" />
You need to combine these style rules to get what you need. The float property ensures they stack in a horizontal row, the block rule allows you to set the height and width of the element and the overflow hidden rule stops it from expanding with the content.
.square {
float: left;
width:200px;
height:200px;
display:block;
overflow:hidden;
}
Thanks to http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ for pointing out it can be done with pure CSS and be fluid, like this:
.onesquare {
width: 30%;
margin: 0px 2% 0 0;
padding-bottom: 30%;
background-color: red;
}
Thats unusual
try something like this. It should work
.square {
width:100px;
height:100px;
display:block;
overflow:hidden;
float:left;
}
See: http://jsfiddle.net/EyXpC/
Use display:block together with width and height attributes.
Related
This question already has an answer here:
Left margin of Margin: auto-ed elements = to padding left of 100%-width overflow item
(1 answer)
Closed 7 years ago.
This is my fiddle: http://jsfiddle.net/o7pfjv3w/. I trying to give to the grid class a margin-left:10px and margin-right:10px; but a scrollbar shows up. How do i get rid of it ?
css code:
.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}
html code:
<div>
<div class="main">
<div class="grid"> <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
</div>
</div>
</div>
Just change your overflow:auto; to overflow:hidden;
.main{
width: 100%;
border:1px solid black;
overflow:hidden; // not auto
display:block;
}
Here is the updated jsfiddle
This has both margin and width: 100%.
.grid{width:100%; margin-left:10px;margin-right:10px;}
You need to make sure you calculate it. So, instead, give padding and make the box-sizing to be border-box:
.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}
Fiddle: http://jsfiddle.net/o7pfjv3w/1/
Here's the fiddle I'd like to have those divs in right column to fill the height. So the first div should start at the top, and the last should end at the bottom, and the space between each div would be the same. How can I achieve this ?
<div>
<div class="left">
<img src="http://serwer1307713.home.pl/bg.png" />
</div>
<div class="right">
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
</div>
This is how I would like to make it looks like
I've forgotten to add one important info, I need that to be responsive ;)
I think this is what you mean, your images do not reach the end of the page?
Add this to your CSS file:
body {
padding:0;
margin:0;
}
It's not that easy, but I think I did it: http://jsfiddle.net/Whre/X3vKd/2/
I added some wrapping divs and used :before and :after pseudo elements to enforce equal heights:
.wrapper {
position:relative;
display:inline-block;
}
.wrapper:after {
content:".";
display:block;
visibility:hidden;
height:0;
}
Assign a height property to your html and your respective divs, then you can manually specify the height for the images in your right or left divs, like so:
.left img {
height: 42%;
}
.right img {
height: 10%;
}
html, body {
height: 100%;
}
Fiddle: http://jsfiddle.net/y8sw9/4/
I have done this with js. Have a look
jsfiddle.net/y8sw9/6/
I am trying to make a fluid grid website and now im facing a problem which a just cant seem to fix just using css. Obviously i'm doing something wrong, but i just cant find what.
Here's the thing: I have one column (div: left) and one body (div: right) displayed in-line. in stage one div left has a width of 180, and div right is growing till it reached 640px (like youtube). In stage two i want to make the column grow some more from 120px to 150 px, But when the column is growing div right gets pushed down, even though there is enough space. Im thinking it has something to do with the margin's technique ive been using but i cant find it, and dont know any alternatives i could use since im trying to do this without using java.
Here is my jsfiddle: which will show the problem clearly: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/
I happy with all help i can get.
Thanks in advance.
<body>
<div class="gridContainer clearfix">
<div id="center">
<div id="left">This is the content for Layout Div Tag "left"</div>
<div id="right">This is the content for Layout Div Tag "right"</div>
</div>
</div>
</body>
here is the css:
#left {
float: left;
height:400px;
width: 150px;
display:inline;
background-color:#F00;
}
#right {
margin-left:150px;
background-color: #6F0 ;
height:400px;
}
#media only screen and (min-width: 650px) {
.gridContainer {}
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
width:100%;
margin-right:500px;
}
Yes it's the margin pushing it down. Not sure what you're asking exactly but I can probably bet you're looking to give the 2 divs the max-width property.
So for step 2 (the media query?), delete the margins and try doing something like:
max-width: 180px;
for the left column.
This is the code I edited in your media query block:
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
max-width:180px;
}
Although do you have them floating right on purpose?
Hi i tried your code and find a solution for you.Hope it will help for you.Here i am
assuming the total width of a page is 1024px.
HTML code
<div class="gridContainer clearfix">
<div id="center">
<div id="right">This is the content for Layout Div Tag "right"</div>
<div id="left">This is the content for Layout Div Tag "left"</div>
</div>
</div>
CSS
<style type="text/css" >
#left {
height:400px;
background-color:#F00;
width:512px;
}
#right {
background-color: #6F0 ;
height:400px;
float:right;
width:512px;
}
</style>
Here i am giving width 512px to each div because i am assuming that total width of page
is 1024px.If you want to increase the width of left by 12 px means 512px + 12px = 524px
then you need to decrease 12px from div right width because width cannot be more
then total width of page i.e 1024px.After decreasing it will become 500px and again
524px + 500px = 1024px.In that case your right div will not push down.
Hope you understand and will work for you.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>