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; }
Related
I am trying to create a website which has a sidebar on the right which is fixed to the screen and takes up 100% of the page. I want my container's width set as 100%, filling the remaining space after taking account for whatever the width of my sidebar is. I need the sidebar to remain stationary as the user scrolls down the page. I would like the height of my sidebar to be a percentage based value. How would I go about doing this?
If I were to use "Position: fixed", it would take the sidebar out of flow causing the container to span the whole width of the page, ignoring the width of the sidebar. This causes issues when I try and apply "text-align: center".
Here is a visual representation of what I am trying to achieve:
Just put .body{ margin-right: 80px} (i.e. the size of your sidebar) and then position fixed on your sidebar.
Check it out here: http://jsfiddle.net/vv84cd08/1/
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.
My site is centrally aligned in a div container #980px width. I need a div gutter on the left and one on the right for clickable banner ads but i don't want them within the scrollable container.
To explain more clearly, if the screen res goes down to 980px I don't want to see the ads or a scroller - just my container. If it goes down less than 980px I want to see a scroller (as I do now) for the center container.
The gutters are only for wider screen users and should not be included in the scroll. I don't want to use media queries as I want part of the ad to show either side if the screen resolution is nearly wide enough.
I'm stuck how to do this. Do I position absolute the container and position relative the gutters? Do I need to use overflow?
Check this fiddle: http://jsfiddle.net/ezy2J/1/
Be aware that unless the iframe is wide enough the banners won't show in the fiddle, so make sure to resize the html iframe in the fiddle.
You can use position: relative on the container and then position: absolute on the banners to get them to stay outside the container.
I've used media queries to hide, show and resize the banners (drag the iframe width for the HTML). You'd probably use display: block and display: none for compatibility instead of opacity: 0 and opacity: 1 but it looks nicer for these purposes!
something like that?
learn about position: absolute
dont forget about position: relative on parent container
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.
I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.