This question was migrated from Graphic Design Stack Exchange because it can be answered on Stack Overflow.
Migrated 13 days ago.
I am trying to create a page that displays dynamic content. I want to arrange my divs as so:
screen width <600px
div1
div2 div3
an-image
div4 div5
div6
screen width >600px
div1
div2 an- div3
div4 img div5
div6
I have some experience using #media() to make content responsive, but I am not quite sure how to go about creating this particular arrangement of divs.
I would be greateful for any tips.
Related
I am building a responsive page using the following:
http://www.bootply.com/2sfiCehqac
What I need to happen is, so long as the screen is medium or large:
1) div_left and div_right (orange and blue) both need to each match the height of the image between them
2) div1 and div2 should evenly split the height of div_left, and div3 and div4 should evenly split the height of div_right
I have been able to achieve the desired effect using a table, but in doing so I lose the small-screen formatting which is already in place.
After some searching and testing I was able to piece together the following solution:
http://www.bootply.com/PISl9rq5Tc
I want an html Page where it contains 9 Divs.
Div1 Div2 Div3
Div4 Div5 Div6
Div7 Div8 Div9
But I want it so that Div8 Is only flexible. It has a minimum width and height but as long as the window grows it can grow.
The rest of the divs are fixed size.
Div1, 4, 7 should be floating Left
Div3, 6, 9 should be floating right.
Thanks very much in advance.
I don't know if I understand your question right, but here is a fiddle describing your needs, ofcourse the width of the divcontainer elements can be variable, if you also adjust the div8 max-width. For resizing to viewport you can use percentages instead of pixels.
i am not able to explain it correctly....but here it is....i want DIVs to float left in the container such that...when their total width increases the width of the container...they will make a horizontal scroll-bar but will not go below one another in any case...
like if the container's width is 500px;
and it contains 5 children DIVs each of 200px width
now when i float then left...they stack like 2 in a row and 2 in the next row....eg:
div1 div2
div3 div4
div5
i want them something like this :
div1 div2 div3 div4 div5
with scroll-bar...
I would recommend, instead of floating them, set display:inline-block;, then apply white-space:nowrap to the container element.
And be sure the container has no fixed width. (min-width is OK though).
update
1) fixed error (thanks to JOPLOmacedo)
2) working example at: http://jsfiddle.net/t9Vnf/
I'm trying to make a layout in which total minimal height would be 100% (if site would be longer, the footer should go down along with it). Header and footer should have 100% width.
http://jsfiddle.net/MXrY2/2/
This is what I came up with (a bit changed example from cssgirl.com), I only need this page to be 100% height at start (and go down if there's more content).
Any ideas how to achieve that?
The answer from this question applies here. Specifically, see the steps outlined here.
If you have 3 divs header content footer
set the min-height of content div to be 100% so thats its height is always 100% long if content is longer
I want a div to be below its sibling, if the browser window is big enough or
to be at the bottom. The div1 doesn't have a static height of course.
This image is how I want to position div2 if the browser window is big
The following is how I want div2 to be positioned if the browser window is small.
You're describing a "sticky footer".
http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/