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%;
}
Related
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
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'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
I have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/