I have a blog and I want to have 2 posts per line. To do that I've tried this:
.post { float:left;
width:45%;}
Well that worked, I have 2 posts floated to the left and they are in the same line.
But, when I enter in the post I want the width of the post to be bigger, but it has the same width as before, something that now I don't want. So I thought to do something like:
.post { float:left; min-width:45%;
max-width:90%; width:auto ;}
But now for the width turns to chose always the max-width.
How will I give priority to the min-width, and only if there is enough space, to the max-width?
You should perhaps place the post elements into a holding div, and give that dive a specific size. The holding div will always be the maximum size.
Related
I have a grid of flippable cards with variable content and try to set the height of cards with less content to the same value as the card with the maximum content. But no matter to which box/cell I apply height:100%, the smaller cells stay just as large as they need to. I can see that the row itself naturally has the maximum height, but why can't all child cells inherit that height?
Here is the example: http://www.bootply.com/NnHFEKwrwu
To understand height, this will only take up the specified height that is applied, meaning that if your container element has a height of 300px, and that child element therefore has the CSS height:100%, THEN that child element will take on that height.
In your case, you really haven't specified a height on any of the elements, only height:100% and min-height:100%. More than likely, your min-height will always be a set number, meaning px, em, etc.
What I'm assuming you want is to have ALL the boxes the same height. If this is the case, then you can see a previous answer that I posted here. The objective is to get all XX elements (that you want to group), and determine the max-height of the group. We then apply this height to all the elements in the group.
This happens a lot when you want carousels, modals, tooltips, or in your case, columns, to be the same height throughout, and therefore making your layout look a lot nicer.
In your case, you'd want to iterate through all the .card elements and get the max-height of those, then apply it to the group. I like to use outerHeight() b/c this will get the border, padding, and margin as well.
var maxHeightOfCards = $('.card').map(function() {
return $(this).outerHeight();
}).get();
// or use $('.card').css('height', Math.max.apply(null, maxHeightOfCards))
$('.card').height(Math.max.apply(null, maxHeightOfCards));
...although there are many things wrong in your code, the solution you are looking for is easier than you think:
.row {
display:tab
}
.row > div {
display:table-cell;
float:none;
height:100%;
}
It's as simple as it gets. Then you can use height:100% to the children elements.
I have a div in my page. I set it's width to 500px. but sometimes it's content get space more than 500px. so I set it's min-width property to 500px.
it expect that is takes 500px by default and take longer according to it's content. but it takes whole of the page's width by default.
But if I replace the Div by a Table, it works correctly.
Does anybody know the reason?
Please see the demo.
Demo.
You have to set in css like
min-width: 200px;
width: auto;
float: left;
Normal block and things like tables, floats, inline blocks etc. use different algorithms of calculating width. For the normal block, the width is usually the available width of the container, and min-width is taken into account only if the container is narrower than it. For the latter things, the width algorithm is shrink-to-fit.
But there are several ways to make the normal div behave like a table.
I am working on a test site with a fairly easy layout. It's divided up into rows of two columns with alternating widths. My problem is, for whatever reason, my image inserted into one of the column divs is not taking up 100% height of the div. It's short by a few pixels. This is a problem because the two columns in the same row need to appear to be "equal height."
I put a red background on one of the divs with the image problem so you can easily see what I am talking about. I am sure it's fairly simple and I am just overlooking something, but on this Monday morning I can't seem to find it. Any help would be really appreciated. Thanks!
Here is my test site: http://hartsfielddesign.com/test2/test.html
Sometimes inline images have extra padding on the bottom due to inline text sizes/line heights.
Set the div with image to
font-size:0;
line-height:0;
http://jsfiddle.net/pxfunc/ZC7Xa/1/
edit:
alternatively, set the <img /> to display:block; so the inline padding isn't applied
http://jsfiddle.net/pxfunc/ZC7Xa/3/
Try adding vertical-align:top to your images rule:
img{
max-width: 100%;
width: 100%;
vertical-align:top;
}
jsFiddle example
If I understand correctly what you are trying to accomplish, you could set a height value on the <div class="product clearfix color-box"> elements, say 200px for example, and then have the .vendor and .vendor-images, as well as the img contained within those, set to height: 100%
You have the wrong aspect ratio on your image. It is too long.
What you can do to make it easier is to give .vendor-images the image as a background instead of using an img tag. Then you can stretch it out so it doesn't give you that errror.
You could also make the left small image a float:left value and the right float:right and use like 30% width on the left and 65% width on the right. Set no padding and the remaing 5% will give you that padding.
or you could just simply change the aspect ratio of your image.
Remove the class .box-expand, .color-box-expand margin and padding. Then set the height on each div. Then it will work properly.
This code work 100% for me.
font-size:0;
line-height:0;
put it on Parent of img tag.
In its simplest form, the problem is as follows. I have two divs (Ldiv and Rdiv) filling up my screen. Widths are 60% and 40% respectively, and heights vary according to the amount of content. Ldiv floats left and Rdiv floats right. The problem is that, as I narrow the window and push Rdiv against Ldiv, I seem to lose the right margin of Rdiv unless I make its width 35-39% instead of 40%. I have tried wrapping both inside an enclosing div container but this hasn't worked any better.
Can this be fixed by making one of the divs (say, Ldiv) a fixed width (in which case the layout is not entirely liquid, but that wouldn't matter too much)? I've read a number of posts here which say this is the way to go, but I can't see why it should. Many others say that with only 2 divs they should both float, but is there a non-floating alternative?
Thanks
Its not possible to give a real answer without seeing your code, BUT i guess to still have margins and paddings in your divs and/or your body element. So, in consequence the 40/60% dont add up to 100%. You can "remove" this with
body, #Ldiv, #Rdiv {
padding:0;
margin:0;
}
Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.
Is there any way to avoid it without javascript?
Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.
Do not use table layouts, table cell divs have a problem setting their width/height and thus will not be able to follow overflow rules.
update the following css properties in your layout.css, this will get you started:
#content{
display:block;
height:90%;
overflow:hidden;
vertical-align:top;
}
#content-inner{
display:block;
height:100%;
vertical-align:top;
}
.article{
display:inline-block;
}
It's still not clear what you want; maybe post a quick sketch?
Anyway, I'd want to avoid the horizontal scrollbar. To do that set #content {
width: 61%;} (based on the rest of the CSS). Currently, in layout.css, #content width is set to 305%.
RE:
#Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how.
div.article-content currently appears 5 times in the page. Setting it to 80% of the screen will give a page that's at least 400% wider than what the user can see.
Questions:
The first div is ID'd as "header", but it's floated left and only 39% wide. Is this a header (bar at top of of page) or a left, side-bar?
Are the articles supposed to be in 5 tiny columns, on the same row, or are they supposed to be one after another, scrolling down the page?
Again, statements and the semantics of the example page are unclear. Posting a quick sketch of the desired layout will help us help you.