I have a site built using 12 column 960 grid.
I'm using float: right to create two columns on the site, and have a scrollable area for my main area. The problem is that the scrollbar wants to sit at the outer left edge of the div, which duffs up the look of it.
Amending the width of this area only narrows the div from the left hand edge of the area and the scrollbar remains firmly on the outer right edge. Is this because this div is set to float right?
What can I do?
I tried to post an image to illustrate but I don't have enough reputation.. hope my description is illuminating enough!
Thanks!
Related
Can you help me what CSS code does this webpage used?
http://www.meetme.com/
Specially on the pictures? I mean not all the pictures, I'm talking about the "mid div" or the content area. Well the webpage has 3 parts right?
header
body/content (mid div)
footer
here is my default image Default Zoom
but when I zoom it all out there are more remaining pictures. So If I make a w:1000px wrapper the webpage is centered but the remaining left and right pic wouldn't show up.
but if i make a w:100% wrapper the remaining image will show up(not sure though) but when you zoom it out it goes to the upper left corner.
Do youg et my point? :) It's too hard for me to explain I've been thinking of it about 2hours.
Maybe this would help a little. Let's just say
The header has 1000px
The body has 2000px
The footer has 1000px
So how will be the width of my wrapper(?) if 1000px well the bodyarea will overlap and the horizontal scroll will show up. and if my wrapper has 100% width. When my webpage zoom out it will go to the upper left corner also my logo will be messed up too. Also the horizontal scroll will show up too.
I want how the picture equally show up to the left and right when zoomed out.
I'm not sure if you want this, but you can margin: 0 auto; a wrapper or container and they will center in the middle of your screen when you give them a width.
Here is a example (this will always center in the middle): http://jsfiddle.net/MWtpn/ If this is wrong, sorry.
EDIT:
You can see the sourcecode when you press F12 or inspect a element. The #site_container on http://www.meetme.com is 952px;. They are using overflow-x: hidden; you cannot scroll to left or right now. That gives the effect that you want I think.
On my frontpage, I would like to CENTER the directory view (CONTENT AREA with headline 'Golfverzeichnis'): LINK
Name of the CSS-Element to be centered: jrDirView
Problem-Description: the images and left-aligned links underneath them should remain unchanged, but the whole directory view area, which is right now aligned left, should be centered, so the white space left and right is equal.
Add the fallowing into your CSS jrDirView class
.jrDirView{
margin: 0 auto;
width:1000px;
}
you can experiment with the width until you find the value you want.
If you look at the page, the content area is already centered.
You can prove this by putting a lot of tags under one of the images that shows up in the right most column.
The problem is that your content is not centered, so to the user, it appears that the the page is off center.
You can tweak the problem by setting the left margin of jrDirView arbitrarily to force the content to appear to be centered, but it won't be a very robust solution.
A better solution might be to force the text area to be the same width (approximately) as the known width of the image and then setting a left and right padding on jrListingThumbnail and jrContentDiv
I'm having trouble in design layout css with div element.
Basically my main page layout design is look like the following picture :
The red box is the browser screen area.
The black box is the content area where the data will included / or loaded via ajax.
The green box is the data list which is the response result and contain about hundred rows inside. The data list contain header div and rows divs.
What i intend to do is set the overflow on the blue area which is the data rows so the scrollbar will appear on the right side of the blue box not on the right side of the red or black box.
Then when the browser area (red) resized all the div inside will also resized to the best size.
I've managed to make the scroll bar appear on the blue box when the data inside is overflow by set css overflow : auto /scroll for blue box div. But the problem is the overflow : auto properties seems only work when i set a certain height for the blue box div let's say about 400px. When i resize the browser the blue box div keeps stay with 400px height.
How to make it auto resize? Thanks in advance for any help.
You need to fix the heights of the HEADER, "Table Heading Row", FOOTER and the "subfooter" row
from there you can calculate the top and bottom position offsets for the middle box, which should be absolutely positioned, the becasue it's positioned you will also need to absolutely position the two bottom footers, in my example I have wrapped them two rows and positioned them as one, this may seem excess but there are in fact a lot of your containers which are no longer required (though I didn't weed them out)
also your float code is too excessive, you don't need to relatively position every float to left: 0.0% so I chopped all tham out, you only need top relatively position something if you want to do absolute positioning inside it.. except for the body element which is all we need to use for this style layout (note I did change the end of your HTML slightly)
refiddle: HERE
and btw, I think this one those internal rows would be better as an actual <table>, it seems like rows of Data to me ;) - and the whole thing would likely mean a lot less code..
What your looking for is a positioned div for the blue box.
.blueboxdiv{
position: relative;
top : 100px; // height of header - Top stays 100px away from header thus grows on resize!
bottom : 0px; // Bottom sticks to bottom
left : 0px; // Left sticks to left
right : 0px; // Right sticks to right
}
I'm creating a webpage where I need a content column in the center of the page (including a fixed width) and two non-scrollable (fixed) columns at the left and the right side of that content column (including a fixed width also). The left column needs to be aligned to the left side of the middle content column. The right column needs to be aligned to the right side of the middle content column.
If the content column gets a lot of content the middle content column should be scrollable with a scrollbar at the right side of the browser. But the left and right columns must not scroll, but stay fixed against the top of the browser.
When resizing the browser width then the left+middle+right columns keeps their width and centered in the middle of the webpage. At the left side of the left column and at the right side of the right column the whitespace will increase/decrease on both sides with same width.
In my screen example you find the concept of what I'm trying to solve.
I tried to search for this problem at stackoverflow and google, but I only found examples wich are a bit different.
Who knows how to solve this problem?
example in JSBin
- (see updated version below, this is buggy, fixed columns are sticky)
the green is not required it's there
to show the wrapper is actually
centering the whole lot
absolutely
position the left and right wraps
first so the the position:fixed
columns don't go to side of viewport
Update
non-buggy version now in JSBin
hmm that was more difficult than I thought it would be; this one works in IE7, 8, Safari, FF3.6, Opera, Chrome
view the source code for the notes, especially interesting is pointer-events, without them the newer browsers will not click through (select text or click a link) an "overlaid" div, which is what this layout is doing it's overlaying an Absolutely Position div and using absolute positioning and relative position to get around the scrolling, vertical and horizontal, issues there was with disappearing content and sticky fixed divs
Updated to use jQuery as per comments
Example: here
I am having trouble getting my left and right repeaters to fill the available space left on wide screens for a website I am working on. The left and right repeaters are background images (approxamately 350px wide) that I would like to show part of, or even repeat if the screen (visible area of screen shown in red) becomes wide enough.
Any help or suggestions would be greatly appreciated!
Thanks,
John
plan of website http://tmw.isystems.co.nz/website.png
Your widths should be set to percentages.
Kill the float on ids: right_wrap_container and right_repeater.
(Based on: http://tmw.isystems.co.nz/ as served at 16:25, New Zealand time.)
to elaborate more on babikers response:
assuming your repeaters are different images (if they aren't this becomes trivial)
There's a few ways off the top of my head (untested):
left div width 50% or body -- background has left repeater
right div width 50% -- background right repeater
absolute position, z-index up the content on top of it
body -- background has left repeater, position relative (maybe optional?)
wrapper div has no width -- background right repeater -- position relative (to body) left 50%
inner wrapper position absolute left (or margin left) -1/2 width of content (e.g. 480px for a 960px layout)
use display: table... or use tables lol