I need to make website layout where I have blocks with "regular dimensions" and "2x2 regular size" blocks and they should be arranged nice, not matter where I put bigger and where I put smaller block. For example if I have situation like this at the pic below, I need block 8 to be below to 5, and block 9 would be next to 8 (below block 6) and so on.
picture: http://i.stack.imgur.com/epWJo.png
Here is my CSS so far:
.block
{
float: left;
display: inline-block;
margin: 3px;
width: 141px;
height: 150px;
border-style: solid;
background: lightgray;
border-width: 1px;
}
.block4
{
float: left;
display: inline-block;
margin: 3px;
width: 294px;
height: 308px;
border-style: solid;
background: lightgray;
border-width: 1px;
}
Can you please help me how to make it?
Thank you
Isotope or jQuery Masonary works well for what you want
http://isotope.metafizzy.co/
http://masonry.desandro.com/
Can't be done unless you want to put your 1/4 sized blocks in a container. So that the container is floated to the left then contains 4 of the smaller blocks. Or you could use jQuery Masonry as others have said.
Related
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I have a Wordpress promoslider pluggin on the front of my website which is inside it's own div, the css looks like this:
#content.promoslider {
float: left;
margin-left: 16%;
height: 420px;
width: 840px;
background-color: #3397cc;
margin-top: 20px;
margin-bottom: 35px;
border: none;
}
On my laptop it is centred and looks fine but on different sized monitors (mainly wider ones) it isn't in the center. You can see it on my website's homepage http://designbyiliria.com/
Could some one please tell me how I can use #mediascreen to adjust the margin-left depending on which monitor it is viewed on I'm a bit confused.
Many Thanks
Set the margins to auto if you want it to be centered on varying resolutions.
#content.promoslider {
height: 420px;
width: 840px;
background-color: #3397cc;
margin: 20px auto 35px auto;
border: none;
}
I've read through several pages of questions, but I haven't been able to solve my problem. I'm pretty sure this is an extremely simple question, and I am really sorry if I waste anyone's time, but I just can't figure this out. I'm not going to post my actual code, because I think a general answer will be faster. My page is simple, nothing fancy at all, it's setup like this:
The entire page is wrapped in a container. The problem I'm having, is i can't make the left column reach the bottom of the page. I've tried height:100%; but it creates a scroll bar because the top bar is 228px in height. I've tried giving the left column a height:100%; and margin-bottom:-228px; but that didn't work either. I've seen this on websites before, and I'm guessing I'm going to get flak because I SHOULD know this, but can I blame it on the cold that I have? Anyway, thanks for any help that I get!
html, body {
display: block;
height: 100%;
width: 100%;
}
#left-column, #right-column {
height: 100%;
}
Setting the <html> and <body> element (as a group selector) to a display: block then stretch it out by 100%, the child elements can inherit what is known as a 100% height, otherwise, the browser doesn't know what to reference.
You could also make your columns absolutely positioned, then add a top:100px; bottom:0 (untested)
LIVE DEMO
CSS from example:
html,body{
height: 100%; /* THAT IS IMPORTANT */
width: 500px;
margin: 0 auto;
}
#header{
border: 1px solid blue;
height: 100px;
}
#left{
border: 1px solid green;
width: 100px;
float: left;
height: 100%; /* THAT IS IMPORTANT */
}
#right{
border: 1px solid red;
width: 100px;
float: right;
height: 100%; /* THAT IS IMPORTANT */
}
I am not sure what i can do to fix it but I am unable to use css to align the images in 1 row and then another row like a gallery. Can anyone help. I have tried to float the div entry to left and still unable to get it correct.
here is the css for entry
.entry {
clear: both;
margin: 0;
padding-top: 1px;
}
Add
display:inline-block
to your div class .wp caption
See this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ as there may be some issues with Cross Browser but i think its only IE6, maybe 7
so in your case
.wp-caption {
border: 1px solid #a87c31;
text-align: center;
background-color: #10050B;
padding-top: 4px;
margin: 10px;
display: inline-block;
}
I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it.
I have a good box hack that centers my main content area, and now I need to impliment the two stripes you see on either side that has a small 1px border on the respective inside border.
I could create a 1px high stripe that is 1000's of pixels wide, but I have a feeling there is a much better way to do this - possibly with pure CSS?
Am I now looking at a 5 column layout here, or is this still a three column fluid?
If anyone can provide a good pattern or link for this style of layout (its probably the most common out there nowadays, huh?) I'd really appricaite it!
Here is my current fluid wrap code:
css:
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
}
HTML
<body>
<div id="siteWrapper">
</div>
</body>
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
background: whatevercolor;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
border-left: whatever;
border-right: whatever;
}