I'd like to create a Layout similar to a fullscreen carousel but without images, just styled text.
My approach so far:
bootply - 3 column content centered
Problem 1: media-left and media-right should be of full window height.
Problem 2: media-left and media-right should reach to the content, the content should only be as width as its content is.
Problem 3: The Labels 'left' and 'right' should be in the center of the left/ right side.
In other words: The center content is always in the center of the screen and uses the minimal space to the left and right, the left and right columns use the rest of the space and center their content too.
The goal is that the previous and next area use the maximum space on the left/ right.
Thanks in advance for your help!
Muff
Related
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!
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
My goal is to have two columns #1, side by side, centred in the page. When the window width is reduced and both columns no longer fit wide by side, they should both be #2, centred in the page, one below the other.
I accomplish #1 by putting both columns in a max-width wrapper and floating them left and right. However when the wrapper width is reduced the columns align to the left and the right, not the centre of the page.
I can accomplish #2 by displaying each column as inline-block and centring them. However when the wrapper is at full width, the shorter column is vertically aligned at the bottom, which often is below the screen.
Any ideas?
I can accomplish #2 by displaying each column as inline-block and
centring them. However when the wrapper is at full width, the shorter
column is vertically aligned at the bottom, which often is below the
screen.
That will work just fine, provided that you also add vertical-align: top to whatever has display: inline-block.
The problem as you describe it: http://jsfiddle.net/thirtydot/Xyrta/
With vertical-align: top fix: http://jsfiddle.net/thirtydot/Xyrta/1/
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