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/
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:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.
The title says pretty much everything. I have a wrapper div with two divs floated side by side in it. The contents and its length in both divs varies. The problem is, that I need the wrapper div to stretch only with the right div. The left div should have scrollbar, if its length exceeds the length of the right div.
One person in IRC already claimed it's impossible to do, but I refuse to believe him. CSS3 and/or HTML5 are completely acceptable since the whole site is wrote with them already.
Thanks in advance, if someone knows an answer.
Here is a fiddle I made which should accomplish what you're asking for:
http://jsfiddle.net/zftXu/1/
Just keep in mind that since the size of the right div is dynamic, if its contents become too large (off the screen), the right div will move to a row below it. If you wish to prevent this, then put an overflow and max width on the wrapper, like this:
http://jsfiddle.net/zftXu/3/
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?
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