I'm working on a new layout for my website and I want the user to be able to change views. One view is a static 540 pixels tall and horizontally/vertically centered. The second is no longer vertically centered and allows the content to define the height.
It's currently working with the first option, but in the second option, the utility column (2011 Browsers Usage Stats) does not fill the entire height. Is there a solution to this?
I don't know how much source code you want. I've listed a link to my website and the differences in CSS code below.
My Website
The first option (currently working):
#floater {
margin-bottom: -27em; /* vertical center - half of container's height */
height: 50%; /* vertical center */
}
#wrapper {
height: 54em; /* vertical center */
}
#content {
height: 33em; /* static height */
}
The second option (not working):
#floater {
margin-bottom: 0em; /* vertical top */
height: auto; /* vertical top */
}
#wrapper {
height: auto; /* vertical 100% */
}
#content {
height: 100%; /* dynamic height */
}
Consider what you're doing versus what you're saying:
#content {
height: 100%; /* dynamic height */
}
but in the second option, the utility column (2011 Browsers Usage Stats) does not fill the entire height
You can only pick one. Do you want it to fill the entire height or be dynamic?
Related
The article 5 Really Useful Responsive Web Design Patterns describes a "Mondrian" pattern for layout on the web that arranges one large box on the left (2/3 or 3/4 width) with a few smaller items, stacked vertically on the right — but then in medium-sized viewports, the design shifts to show the main box at full width, with the other boxes side-by-side, horizontally below. (And on small screens, everything is 100% width stacked vertically.)
I have this pattern implemented using floating divs, but I would like to get this implemented using flexbox, so that the boxes can be of equal height no matter what. That's what flexbox is so good at!
Conceptually, I think that this can work, but I am just not having any luck at all with this. I'm surprised that I haven't found any references to this (except for a jsfiddle that's not really what I'm looking for at all.)
I believe that this could be implemented with column wrapping, and the first item's flex basis fairly large so that it takes up all of the vertical space on larger viewports, with the remaining boxes wrapped into a second column, stacking vertically. Using a media query, I think you could then just change the flex-wrap to be row-based so that the remaining smaller boxes get arranged side-by-side below the main full-width image.
And yet, I get nothing. No point even linking to my CodePen work in progress because it's just so pathetic. :-)
Anybody who is super-flexy interested in showing how this might be done?
/* ┌──────────────────────────────────────────────┐
│ These values determine when to switch layout │
└──────────────────────────────────────────────┘ */
.big {
flex-basis: 600px;
}
.outer.flex, .small {
min-width: 300px;
}
/* ┌───────────────────────────────┐
│ This other code makes it work │
└───────────────────────────────┘ */
html, body, .outer.flex {
margin: 0; /* Remove margins */
height: 100%; /* Fill all window */
}
.flex {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Multiline */
}
.big, .small {
overflow: auto; /* In case the content doesn't fit */
box-sizing: border-box; /* Desirable if you want border or paddin */
border: 3px solid; /* Optional */
}
.big {
flex-grow: 2; /* Grow to fill available space, with factor 2 */
min-height: 50%; /* At least 50%, and allow 100% */
background: red; /* Optional */
}
.inner.flex {
flex: 1; /* Grow to fill available space, with factor 1 */
min-width: 33vw; /* At least 33% of the width of the window */
min-height: 50%; /* At least 50%, and allow 100% */
}
.small {
flex: 1 33vw; /* Grow to fill available space, with factor 1 */
/* At least 33% of the width of the window */
background: blue; /* Optional */
}
.small:first-child {
background: green; /* Optional */
}
<div class="outer flex">
<div class="big"></div>
<div class="inner flex">
<div class="small"></div>
<div class="small"></div>
</div>
</div>
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
I have a sticky footer which works, but I'm using a tiled background image and an inner #content div. The problem I have is that the #content won't expand to fill the height of the container. I've got a demo at http://jsfiddle.net/mpRUT/1/, where I've changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.
Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?
The effect can be seen at http://myfitzeek.lime49.com/
IMO: Will not work 100% without min-height. (see comments)
My old answer:
Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/
#wrapper: {
/*min-height:100%;*/ /* remove! */
position:relative;
height:100%; /* new! */
overflow: hidden; /* new! */
}
#content {
text-align: left;
line-height: 140%;
background: #fff;
font-size: 1.2em;
/*min-height: 80px;*/ /* remove! */
height: 100%; /* new! */
}
Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin.
#wrapper { margin-bottom: -60px; }
#footer { height: 60px; }
What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser? If you're using a sidebar in your finished design, you can use .clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable.
Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).