Some background: Nearly every site I build is based on using a center container div where everything you see on the screen is contained within, for example, a 1000px wide container. Nothing to the left or right and no top or bottom bars that extend off to the left or right sides of the screen. Now it's time to build a site with top and bottom bars that expand out past the 1000px container div. Got that part, right down to the bars themselves.
The Problem: I want to position text (links to be exact) within the top and bottom bars, not dissimilar to how SO looks here. This is where I'm getting messed up because I want to do this without absolute positioning, or JS or jQ or via plugin. When I add a div to contain the text within, say, the top bar, it sits happily to the left of the top bar, not where I want it. I have searched, researched and made small attempts to figure this out but to no avail.
THEREFORE: I built a sample site which includes an image if how I would like things to look. The site is bare minimum on HTML and CSS to (hopefully) make things clear, and can be found HERE.
Add this to your css:
#top_content {
margin: 0 auto;
width: 1000px;
}
This will make any text within <div id="top_content">here</div> align with your main 1000px container while <div id="topbar"> still expands to 100% of the browser width.
Do the same for your footer, giving it an inner div and targeting it with CSS to give it auto left/right margins and 1000px width so it centers under the main #content container.
Related
I've looked for hours on how to do this and have tried numerous experiments which get me some, but not all of the features I need on my landing page. Once I get the final piece of the puzzle in place, it seems to break other pieces I already have working. So it seems I can solve the problem in pieces, but I fail when I try to combine the pieces. Perhaps there's a conflict between them that can't be resolved? I'm pretty sure this is something that can be accomplished.
Let me attempt to explain what I'm trying to do:
I need two divs that sit side-by-side on my landing page when it's in a wide format (wider than 320px), but I want the two divs to stack on top of each other when the web page is not wide (< 320px). This is easy enough to accomplish by using: style="display:inline-block;float:left;" on each div and the two behave as I want. However, this breaks down when I try for other needed features, such as:
The contents of the left div (which is also the top div when 'stacked' due to a narrow browser window) need to be centered both horizontally and vertically within that left div in both the wide (>320px) and narrow (<320px) page formats.
The contents of the right div will be fixed at 320px wide and 420px high in both page formats as I'm using a facebook plugin to post status updates.
The left div size should scale dynamically with the browser window size as follows:
When the page width is > 320px, I want the left div to be the same height as the right div (420px) so that the contents in the left div will be centered vertically with respect to the contents of the right div.
When the page width is < 320px, I want the left div (which is now stacked on top) to only be 50px high, and the right div (now stacked on bottom) to remain fixed at 420px high.
The contents of the left div should always stay horizontally and vertically centered within that div no matter the width or height of the left div.
Can it be done with pure .css, or is a javascript hack necessary?
Hopefully I've explained it well enough that someone can help me out - it would be greatly appreciated and will allow me to move on with coding the rest of the page.
Thanks
I earlier learned something interesting and tried to play a bit with it, however I noticed something I never noticed before.
When I resize my window over my div width, it doesn't evenly hide my div but stop on the left and start hiding from the right.
After some research I found out differens answers like giving a positionning would lead to such thing but considering how basic my code is it seems to not be the reason...
Here is my code :http://jsfiddle.net/L9Srn/5/
<div id="container"></div>
#container {
background: red;
margin: auto;
}
var box= $('#container'),
ratio= 0.363,
height= 400;
box.height(height).width(height*ratio);
That is the way browsers/CSS work. When elements are too wide to fit in the window, they stop at the left and overflow to the right.
Off the top of my head, the only ways to have things hide to the left of the browser window on resize are:
absolute positioning
fixed positioning
negative margin
negative padding
having the part that's disappearing be a background image centered vertically.
Even if you use these methods though you won't be able to scroll to the left to see the content that is cut off.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
Basically, I am looking for a way to center a container that is 1600px within a container that is 940px.
I want the page to stay centered at all times, and the main content of the site is 940px wide. I have an image that is 1600px, and just adding the image forces the image to align left with the 940px container and overflow to the right 660px. See the image below for an example.
What I want is the image to center within the 940px container, and save for adding multiple background images, which really isn't pre IE8 friendly, I am at a loss.
I've never really had to do this before, so I've never run into this problem.
Right now, I have the page set to a master container of 1600px. This works, but when you open the page, the page starts at the far left of the 1600px container and the main content appears uncentered.
Example 2 below is what I am looking for.
Any help is greatly appreciated. Thanks guys and gals!
Or you could just center the 1600 container relative to the Page using the following attributes:
left: 50%;
margin-left: -800px;
You can use javascript to get the width of both divs, then take the difference between the two (1600-940=660px). Divide that by two for centering (330px). Then position the container left that amount (-330px).
You can set a negative margin on the image. You can use Javascript to compute the actual number, but if it's always going to be 1600 within 940, then you can set a negative margin of 330px.
(Container width - Content width) / 2 = Left Margin
#container img { margin-left: -330px; }
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.