I am trying to do 3 columns responsive layout. It should work for IE8 also. So I am using float: left for elements in row, but I faced with some troubles:
The last images in row has unexpected height. I understand that it occurs because .news_preview { width: 100%; }, but I do not understand how to fix it.
.news__item elements should have the same height = 100%. I know how to fix it using JavaScript, but is it possible to fix it using css only for my .news__item elements with float: left;?
The example: https://jsfiddle.net/3nxetb45/1/
Well, there are few points which you should be aware. I have removed height:100% from .main and used clear:both after div.
About using clear:both, use them just after floated element so by this there will be no extra height or space issue.
About second issue, i have used display:table to main element and display:table-cell to child and removed float:left to get the desired output. Also we have replaced bottom-border to get result. For more detail check fiddle..
Check here
Related
http://codepen.io/anon/pen/Keisz/ <-- simple example
This codepen mimics an issue I'm having. I want the parent elements (outer and inner containers) to fully encompass their content (the content div) - I'm at my wit's end of how to accomplish this and I'm almost certain it's a simple fix.
Applying
box-sizing:border-box;
to the child element is not what I want. I want the parent to resize to child, not the other way around.
Any help you could provide would be most appreciated!
EDIT: I think there is some confusion. I want the parent to dynamically resize to contain the largest child width + padding. The max-height is also a requirement, sadly. :(
Remove the height and width attributes from the content div. Voila
http://codepen.io/anon/pen/pluAk/
Unless you apply box-sizing:border-box; the parent will not take into account the padding while wrapping around the child divs. You need to apply this style. Otherwise the code you've posted works just fine (it neglects the 20px padding on the innermost div and the parent wraps around the width of the child div minus the padding on thew child div).Just remove the max-height from the parent div and you are good to go
Not sure what is the ultimate purpose of why you are doing this, but assuming that it would help, this is an idea
#innerContainer {
display: block;
overflow: hidden;
}
FIDDLE
I am making a table-type layout with divs and spans. I am getting some weird behavior when any of the spans are empty - a margin appears at the top of the parent.
I think it might be linked to using display: inline-block but I'm not sure why it is doing this.
Here is what I am talking about
Is there any way to fix this strange layout behavior?
Add vertical-align:top to .ListView_ColParent
.ListView_ColParent {
display:inline-block;
vertical-align:top;
}
jsFiddle example
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I am attempting to build a responsive design from the ground up and using jsfiddle to do some testing. I have two outer columns with fixed widths and a central column that takes up the remaining width in between. I cannot for the life of me get the outer columns to expand to fill the height of the wrapper they are in. I think this may have something to do with how I got the middle div to take the central space (putting it after the right div in the order and then adding overflow:hidden).
I have tried clearing the floats with a div with clear:both on it and have also tried adding overflow:hidden to the wrapper.
The jsfiddle link is : http://jsfiddle.net/jleslie/ErAWn/1/
Any help would be much appreciated!
Don't use floats. You can keep it responsive with left and right absolute positions:
http://jsfiddle.net/ErAWn/4/
Applying this style to the side column works in Safari, Chrome and FF even though does not seem to work in jsfiddle, plus floating is preserved if you need it:
.side_col {
width: 200px;
background-color: red;
height: 100%;
}
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.