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.
:)
Related
I am trying to achieve an effect contrary to that promoted with flexbox. I have a 3x3 div layout and I want the center div to stay fixed in the middle of the screen and the 8 divs around it to be shown only in part (this is, if the set of 9 divs is larger than the screen).
As far as I could investigate, flexbox always brings solutions to avoid this effect, and I want to provoke it.
Is there a css command to keep this design fixed in the center so that it is not deformed, and its size is independent of the screen size?
use css max-width:250px; or width:250px; with css media query
refer link [https://www.w3schools.com/cssref/pr_dim_width.asp][1]
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 found a simple web site design example using DIVs at the following link:
http://www.htmlgoodies.com/img/3_column.html
The problem with this design is that it is a fixed width. I need a design where the wrapper DIV expands to the full screen area (100% width) and the header, main and footer DIVs resize along with it.
If I set the wrapper and footer widths to 100% it does take up the full area on a maximized browser window but shortening the window causes the right and main DIVs to wrap downwards. How can this wrapping be prevented?
I'm not sure if this is the answer you are looking for but surly using float:right or float:left on the div that is wraping under another div should fix the problem?
I recommend looking into using fluid960gs
Cant be done, only one attribute for DIV, which is the align attribute. Maybe consider using tables: http://www.w3schools.com/html/html_tables.asp
Shadowpat
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/)
I am creating a blog based on the 960 grid system. It has three simple divs:
header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.
here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.
Please help me! ... This is driving me nuts!!
jake is absolutely right with the 100% width related to the viewport of the browser.
instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.
Found the solution! ... just set a max-width in pixels and also a width in 100% wherever u see this problem. Works for me.