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
Related
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.
Perhaps I'm the last developer to ask this but I don't get it:
I'm considering using a fixed width layout such as this one:
http://www.gridsystemgenerator.com/gs02.php
Based on the screen size the left and right columns resize dynamically while the middle grid stays fixed. Great!
Now what I don't understand is that there are ton of websites out that use this approach but they also have page sections which have borders and background images that fill the complete screen width.
An example:
http://www.gridsystemgenerator.com/gs02.php
The top strip, tab menu and footer sections have lines that extend out over the full screen width.
How do they do this?
Pavlo, thanks for the tip!
So it turns out that there are container divs which are width 100 and float left which can contain design elements across the whole page width. Then the fixed grid divs are embedded into the container divs.
:)
I'm in the process of creating a responsive site (currently only working on the main content.)
I've created two floated divs with percentage based widths. One contains an image which resizes with the browser resizing. The image has a min-width of 100px.
Can anyone tell me why when put into a mobile sized width it doesn't drop down? How can I make the image stack underneath the text?
JS Fiddle
Live site
If you apply the:
min-width: 100px; to the aside element instead, then on a small screen it drops to the bottom. Good luck with the design. (Like this: http://jsfiddle.net/eddturtle/7d6D7/1/)
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/
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/