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.
Related
Hy there. I'm macking an HTML/CSS tutorial and I'm facing some problems with positioning and those stuff. I got 3 stacked elements at my header and want them to be at the very center.
So I try something like this:
.container {
margin: 0 auto;
width: 940px;
}
at my CSS code, and add this class to those elements. It is recognizing the comands, since it moved a bit. But not the way I expected:
It remanied at the left, just a few more steps to the right. Funny part is: if I put something like
.container {
margin: auto 50% auto 50%;
width: 940px;
}
it's behavior is:
it GETS centered, but extends the screen lenght and put a scrolling bar. Why? Shoudln't both those options center my elements? What can I do to achieve my goal? I would appreciate an answer so much, since I get a lot of difficulties when trying to understand this part.
In your first example, the element is centered fine - it's just still 940 pixels wide, nearly the entire browser, thus not really far from the left edge. If you want to center its contained elements as well, just add text-align:center to it.
To see better what's happening, consider temporarily adding a background:red to the element and a lot will be clearer. It makes learning CSS tons easier to actually see the 'boxes' of the box model doing their job.
In your second example you appear to be confusing the order of values of the margin declaration. You're actually giving it a left and right margin of 50%, putting its left edge indeed right in the center. The 940 pixels width then make it stretch off to the right, still 940px wide, causing the scrollbar.
.container { text-align:center }
Give it a shot.
This would be straight forward to solve if you added your html as well.
I'm building a relatively complicated page with some nested tables that should scroll. Despite reading as much as I can on HTML tables, I don't seem to understand what's going.
See http://jsfiddle.net/JasonJSFiddle/etye72eg/
I want the top panel portion to always be 80% of the screen and the bottom to be 20% of the screen.
table.outer-table tr.outer-table-row1 {
height:80%;
}
table.outer-table tr.outer-table-row2 {
height:20%;
}
I was assuming by putting the 'overflow:auto' in the , this will make the nested tables scroll while maintaining the 80%/20% ratio of the outer table. However, it seems to just push the cells out so top and bottom is 50% each.
How can I get the top portion to be 80% of the screen, and the nested table on the right to scroll and the bottom portion to be 20% and the nested table at the bottom to scroll?
Thanks!
Its usually not recomended to do layout with tables. Unless if you're working with mail marketing or some weird browser that doesn't support divs.
I like to do layout with divs using the css attributes:
display: table;
display: table-row;
display: table-cell;
It gives the divs some tableish layout capabilities.
I have made an example for you with divs here;
You can put the tables that are really necessary inside the divs. But to use percentual sizes, you have to make sure that the outer (outermost) element have a fixed size. (can be your div#main, or some other external wrapper of your layout).
Hope it helps
When an HTML table is wider than the page body, it's always left aligned, no matter if you specified a centered alignment. I've a table containing CSS3 gradient buttons, whose size isn't easy to predict (buttons size depends on the font used by the browser). On some browsers this table grows wider than the page body, causing the table to become uncentered related to the page banner.
I've read questions like this: Center table, even if it is wider than parent container stating that the only way of centering tables in this scenario is with Javascript.
But I'd wish to find a solution without javascript. The page design is very simple (just the site logo centered on the header, and an array of big buttons below).
Do you have any suggestion for an easy and elegant solution for this, so that the buttons table is always centered in the page?
http://jsfiddle.net/JQ3qb/
I'm not sure but is, this what you want? You can do it with positioning and then play with left percentage to adjust table.
#test{
border: 1px black solid;
width: 800px;
position:relative;
left: -25%;
text-align:center;
}
I have a two level horizontal navigation menu; the 2nd level displays vertically. The amount of items on the 2nd-level varies. Sometimes, there are enough items that the list extends beyond the browser view. I decided to use overflow-y:auto and max-height:<arbitrary height>px to prevent that problem. But now I have another problem of scrollbar clipping some vertical real estate of the overflowed list to make room for the scrollbar itself, which forces horizontal scroll bar to appear to able to display the clipped area.
What can I do to prevent the scrollbar clipping part of the list's width? Thank you.
Live Example
p.s. if you have a better title for the question, let me know. I was having a tough time with it.
I had a quick look at it and noticed that your "a" tags have both padding:5px and width:100%; this cause them to be rendered as (100% + 10px) where 10px will always be behind the scroll.
So in order to have the container to correctly have 100% width, try to give "a" tags padding:5px 0; and give padding:5px; to the vertical drop menu.
Hope it make sence.
Here are changes I made: http://jsfiddle.net/XxasC/10/
You need to fix some issues caused by added padding.
Conclusion: Never give both "width:100%" and "padding-left/right" to an element because it will be rendered wider than 100% ! (Padding is always added to the width - even 100%)
I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.
I'm not even sure what code to copy in here, so the link is:
projects.thomasrandolph.info
What I need is for the left side of #page to stop sliding left at the right side of #logo plus a few pixels. It's 13.25em from the left of the page.
I've set the left margin of #page to 13.25em, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.
So I want the left side to go no farther left than this:
I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.
I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.
Update:
Here are images of how it currently looks at two resolutions:
1920
1280
Here's an image of how it should look at resolutions below approximately 1540:
Any resolution higher than ~1540 would slide smoothly to the right, as it currently does.
What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!
On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.
If you don't use a border for the element you can use it to define a "min-margin".
.center
{
margin: 0px auto;
border: transparent solid 30px;
}
P.S. I know this is an old question, but the OP also commented this month.
Give exact width and height to class center. then set position to absolute: lets say we wanna set width:400px; and height:300px; try following piece of code for center
.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}