I've got a table#Content which has a background that extends beyond it's horizontal bounds. I've sliced up the the backgrounds and made a table#Main, with td#Left, td#Content (which contains table#Content), and td#Right. I've set the backgrounds into the td#Left and td#Right, positioned correctly.
Question 1) I can't get the whole table#main to be centered on the page.
Question 2) The design is beyond 960px. But the main content is within 912px. The td#Left and td#Right are extra. Is there a way to keep the main content centered and if needed shrink the td#Left & td#right.
[update] I'm open to directions towards a div solution.
[update2] I'm going to rephrase the question. How do I make 3 columns fill the screen, with 2 outer columns be auto/% and have the middle one be 912px.
For the table and margin: 0 auto; to center it if that doesn't work put a surrounding div with that style in it along with a width....
The table background just add background:url(...) center center ;
I'd give you an example but I'm on my phone
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
This question already has answers here:
Why does the CSS min-width attribute not force a div to have the specified minimum width?
(6 answers)
Closed 8 years ago.
The template to rebuild my website works great except for the 2 divs in the center which are floated left & right. They seem to need at least a full line of text in each one to stay open.
If not the navigation on the left seems to go off screen to the left. The left & right divs are fixed widths.
The 2 center ones are floated I believe properly & cleared. Each 48% width.
Is there a way to keep them fully expanded for pages that do not have a line that covers the full width. I know my screen is 1920px's wide & they are getting wider.
I have been researching this for days & always seem to end up at this site.
The only thing I can think of is to put say 16 - 100px wide spacer gif's side by side in each center 48% div. That just isn't right.
Is there a way to keep the div's full width?
Full page sample. If either of the 2 full lines in the 2 center div's are shortened the left nav goes further left.
http://www.trurons.com/travel/
I looked at the source of the page you linked and can't figure out what you are talking about and I can't visually grasp it from your question.
If the other posters answer does not help I would reccommend looking at this site here for a refresher of how HTML elements interact with eachother. You probably already know it but the refresher might help you figure out why your elements shrink and expand based on what is around and in them.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.
I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.
Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?
Any tips would be appreciated. CSS is not my strong point, but I'm learning.
Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.
You have these options:
Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)
Assign a width to all three divs
Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).
Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.
PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.
Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.
I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?
Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.
This site is really helpful for this sort of thing:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.