I have a reasonably complex layout problem:
I would like to have a main box that has 95% width and that has side margins all around (140px 2.5% 20px 2.5%).
Within that box I would like to have two columns:
The first should (left hand) should have a transparent background and will be mainly for links but also some other arbitrary block content (like poll results etc.). The menu in this bar is an unordered list and I would like it to highlight in such a way as to appear to join with the content when active (which means that the 2nd column must be at least as high as the menu is; thus equal height columns are an issue although, I don't mind using min-height and assuming that the menu will never be longer than, say, 400px). This column should be 180px (unless a percentage is absolutely vital; then just assume 30%)
The second column is the content column and should be padded in slightly from the main content holder but not from the left hand column (so that the links appear to join the content). I would like have rounded corners on this column which means that the standard faux column technique will not work because the rounding does not apply to it. (this column should take the rest of the available space inside the main div that is 95% wide)
I also like the idea of using rounded corners on the left hand side of the highlighting of the active menu item.
All this is going to have an absolutely positioned header above and if possible, I would prefer to use jquery's "corner" plugin to create rounded corners rather than images but I'm at a stage where it doesn't matter immensely.
The problem is that I've done each thing individually but not all together. IE generally mucks it up somehow. For example, the closest that I've come to doing it correctly, IE decided that although my menu bar was floated to the left, it shouldn't actually write any content horizontally in line with the menu and so although the box was there (I could see the background) the content was halfway down the page...
Sorry that this is so long and without code but it seems silly to give a pile of code to what seems like should be a trivial problem...
Here's what I managed to get working in standards compliant browsers:
alt text http://www.inselpix.com/img/24036931603.jpg
(I've never used this image host before, I hope it works...)
Check out the float tutorial.
This 2 column layout caters for IE deficiencies.
IE has problems with the float model (although apparently there's improvement in IE 8). You could try using just absolute positioning... even though that's probably not the ideal solution.
Thanks all, Katesmeow probably helped the most:
Turns out what I needed to do was absolutely position the main div and the left (menu) div (which I gave a minimum height) and then relatively position the content div. I made the left menu 18% wide with a 1% left margin and the content div I made 80% wide with a 1% right margin. I also had to add bottom padding to the main div according to the top offset that I gave to the content div (so I used "top: 30px" to give the main div padding from my content div and then used "padding-bottom: 60px" to compensate 30px for the top - because otherwise the div extends too far - and then add a further 30px of padding).
The problem is that IE still mucks it up; so while my main div is 95% wide, IE doesn't do the relative widths properly and my main content pane is too wide. So, I used conditional comments and set the content div to be 76% wide (95% x 80% = 76%) and it's working reasonably well. The rounded corners are doing something slightly odd in IE but it's fine... The biggest problem now is that I don't have a bottom margin on the main div but I can live with that if I can't figure it out.
Related
I have a page with a container div, this container div has two columns, both inline-blocks. One column (left Hand side (LHS)) is the ticbox selection for a shopping catalogue, the right column is the output of the chosen selection.
The issue I have is that each is assigned a width based on percentage of the parent width, the left - fixed column is 20% width, the right, output column is 79% width (I tend to allow 1% for variability) .
BUT: the left column needs a minimum width - defined in px as 155px;
The right hand side (RHS) column is filled with inline-blocks for each product displayed by the catalogue search. These blocks are fixed width (140px)
MY ISSUE:
When the page loads on my screen it's fine, but when:
LHS:
min-width:155px < width:20%
(the browser window is resized)
The whole of the right hand side drops below the content of the left hand side (as the width for it is less than the required 79%.
Some simple example:
Please note there is no borders or paddings to be considered when measuring widths.
HTML:
<div id="container">
<div class="leftsideMenu">Menu column.</div>
<div class="rightsideShop">Shop Contents</div>
</div>
CSS:
#container{
width:80% /* of screen */
min-width:555px; /*should leave 400px for shop contents */
}
.leftsideMenu {
display:inline-block;
width:20%;
min-width:155px;
vertical-align:top;
}
.rightsideShop{
display:inline-block;
width:79%;
max-width:calc(100% - 156px) !important; /* fix attempt - doesn't appear to work */
vertical-align:top;
}
[Some] ATTEMPTED FIXES (not in order of attempt):
1) Calc to make the max-width always less than 100%-155, doesn't appear to work
2) Floats and margins : this does work but presents the problem of layout that the client doesn't want shoes underneath the LHS column and float height = 100% parent is another issue,
3) I have also tried to use https://stackoverflow.com/a/6350781/3536236 answer to a similar question - with the approach of having the RHS relative and using a forced LHS margin but this doesn't work as the solution linked here didn't work for me in this situation.
4) I think flex-box style working is probably a best way forward but I do not know enough about it, and to be brutally honest, I was hoping to avoid a massive reworking of the page CSS. (I had originally expected this issue to be 30minutes!).
5) Setting no width (just max-width) for RHS - to auto defined width, this auto defines to 100% and goes underneath the left hand side column.
I think the answer is pretty simple but I can't see it :(.
To explain parts for the points above, the LHS was originally a float and that worked fine but the client wanted no products appearing underneath the menu in the LHS column, so I thought - ah simple, make it an inline Block....
Any help as to keeping the right hand side giving the left hand side the space it needs, even upon screen resizing?
............
OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:
Now after all this effort for writing this out I want to post it anyway, but the Solution is below!!!
OH FOR FFFFFFFF SAKE -- I have just written this all out, and while I've been writing this have been trying different ideas as they've occured and it's finally worked:
For some reason my calc works with:
max-width:calc(100% - 160px); Giving a spare space of 5px .
Any ideas why this is so, as I say, within the container div standard widths are percentages and there is some padding in the product container (inline-blocks) inside the RHS, but this really shouldn't have influenced having to add more "padding" space in the calc method.
Anyway, it works now. I'm happy. Maybe this will help someone?
With inline-block you will have some whitespace taking up some space in your layout.
Two inline-block divs with a width of 400px in a container div of 800px won't always render next to each other.
You can fix this by making sure the closing tag of an element is directly next to the opening tag of the next element in the HTML (e.g. </div><div>, no newlines or spaces).
A better option is to apply font-size: 0 to the containing element and then reset the font-size to e.g. 1rem for the inline-block elements.
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
I have a website with a few <div>s set up similar to this example http://jsfiddle.net/kLQ5z/1/
The problem is that if a visitor has a small screen, the outerContent will be off-screen.
Normally, scrollbars would appear, but because I've set the <div>s up in such a hack-ish way, they don't appear, and you can't even use your mouse's horizontal scroll.
Any help?
I played with your jsFiddle, and here's something that seems to work. Basically, what I used was an iterative process:
To make scroll bars appear when the floating box goes off screen, it has to lie within the content area.
One way to do that is to give the main box a fixed left margin, but to keep it centered, we then need to wrap it in an outer div with margin: auto.
To keep it exactly centered, we also need to give it a matching right margin.
But ideally, if the screen is too narrow to show it fully, we'd like that margin to be squeezed out before any scrollbars appear. What works like that in CSS? Table cells! So instead of a fixed margin, we use an empty dummy div with display: table-cell.
It's still a hack, and I'd be surprised if it couldn't be improved. Nor have I tested it very well, but it seems to work on Chrome at least.
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/