I was working on a page and I created a 2 column layout with the central content in a #wrapper and then I made both columns the same height.
Column 1 has more content than Column 2, so to achieve the same equal height, my code is:
CSS:
#col1 {
width: 70%; height: 100%;
min-height:30em; float: left; margin: 0; padding: 0;
}
#col2 { width: 30%; height:100%; min-height:30em; float: right; margin: 0; padding: 0; }
#wrapper { width: 70%; height: 100%; min-height:30em; margin: 0 auto; }
HTML:
<html>
<head>
...
</head>
<body>
<header><h1>Title</h1></header>
<div id="wrapper">
<div id="col1">
Content here
Content Here
Content Here
Content Here
Content Here
</div>
<div id="col2">
Some Content
</div>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
My Content in #col1 overflows in Safari but not the other browsers. Does anybody have a solution for this issue? I have played around with the height and min-width properties but hadn't found a way to get the Safari browser to comply.
My goal was to make the page responsive, #col1 and #col2 with them expanding to full hieght regardless of content (and without overflow).
If my question is unclear I can clarify.
Cheers!
Edit
I had also tried to use a few media queries, for example:
#media screen and (min-width: 1000px) {
#col1, #col3, #wrapper { min-height: 35em; }
}
#media screen and (min-width: 500px) {
#col1, #col2, #wrapper { min-height: 40em; }
}
I thought that if I extended the min-height each step of the browser dimensions re-sizing, that both columns would, in effect, grow and accommodate the overflow text.
You are using min-height: 30em so you always run the risk of overflowing, depending on size of the screen you're looking at. How about using the old 100% height content with a fixed height footer at the bottom?
Like this:
http://jsfiddle.net/davidpauljunior/8Hkz2/2/
Not that the box-sizing rules I put in won't work for IE7.
Just a note: The value of the min-height property overrides both max-height and height. So as both #col1 and #col2 are in #wrapper that has 100% height, you should only specify a min-height.
In terms of the overflowing text in Safari, have you tried adding text-overflow: ellipsis; or text-overflow: clip; to #col1?
Related
I have a centered div with a width of 700px, with a middle part that must become a right column when viewport is > to some width. I used absolute positioning for that purpose but like this column must be responsive, I don't know its width.
First, I would like to know what is the rule for how behave the width of absolute positioned elements which are out of their relative parent. Absolute positioning should use the width of their relative parent but when the element is out of that parent, the element is shrinked. If there is a word without space, it extends the element accordingly and everything follows. I don't understand how it works and how predict that behavior. It's the same when that element without width is supposed to start overflowing out of its parent.
Then, is there a way to make this column fills the right until it reaches the limit of the window without overflowing (with a little margin-right)? If I fix a big width on that column assuming it will be the max-width that column will achieve in the biggest viewport and use the overflow property to hide what is out of the window, of course, the absolute positioned element is just cut.
I really don't know how to make that responsive because it seems like absolute positioning removes the element from the flow, it is not made for my purpose. Of course, no JS, please. And it must support Internet Explorer since IE8.
The only solution that comes to my mind is to duplicate the content and use display:none/block to switch blocks with media queries but it means redundant code. I tried with a complicated display:table layout until I found that colspan doesn't exist.
(Just so you know, I have a left column too to take into consideration, the reason why I am using a three columns display:table layout. If that's relevant.)
Here is a simplified code:
I didn't put media queries but the aside-on-small-screen is obviously what it should look like on small screens, replacing the aside selector.
main{
overflow:hidden;
}
.colMain{
background-color:green;
margin-left:auto;
margin-right:auto;
position:relative;
width:300px;
}
.aside{
background-color:red;
position:absolute;
top:0px;
left:320px;
}
.aside-on-small-screen{
background-color:red;
}
<main>
<div class="colMain">
<div>stuff</div>
<div class="aside">aside that must extend all the way to the right until it reaches the window limit</div>
<div>stuff</div>
</div>
</main>
Thank you.
Used flexbox and assigned aside a percentage width. The details are in the CSS portion of Snippet.
Flexbox
justify-content: space-between
order
flex-shrink, flex-grow, flex-basis
Relative units of measurement
Viewport width/height vw and vh
Percentage
em
/* Optional Defaults and Resets */
* {
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html {
font: 400 10px/1 Arial;
width: 100%;
height: 100%;
}
/*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: none;
}*/
body {
font: inherit;
font-size: 160%;
/* background: rgba(0, 0, 0, .2);*/
line-height: 1;
overflow: visible;
width: 100%;
height: 100%;
}
/* Demo Styles */
/* All outlines and backgrounds are for presentational purposes */
/* vw/vh viewport width/height 1vw/vh = 1% of viewport width/height */
main {
overflow: hidden;
/* width: 100vw;
height: 100vh;
background: rgba(0, 0, 255, .2);*/
width: 100%;
height: 100%;
min-height: 35em;
display: table;
}
/* Flexbox layout will automatically keep .aside to the right with the */
/* property justify-content: space-between; which keeps the max amount */
/* of even space between flex-items (which is .stuff and .aside) */
.colMain {
/* display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; */
background-color: green;
margin-left: auto;
margin-right: auto;
position: relative;
min-width: 99%;
min-height: 99%;
padding: 1em;
display: table-row;
width: 700px;
}
/* Removed absolute positioning in favor of flexbox and a percentage */
/* width. .aside will start dis-proportionally expanding while the viewport */
/* expands. The two columns on the right while begin to shrink in response */
/* to.aside's expansion. All this stretching and shrinking happens when the */
/* elements are at 210px or more (210 is 30% of 700px). This behavior is */
/* accomplished by using flex-shrink, flex-grow, and flex-basis */
.aside {
display: table-cell;
background-color: red;
position: absolute;
top: 1em;
right: 0;
left: 70%;
/* order: 3; */
min-width: 30%;
max-width: 500px;
min-height: 100%;
/* flex-grow: 1;
flex-basis: 210px;*/
outline: 2px solid #7c1b38;
padding: 5px;
}
.aside-on-small-screen {
background-color: red;
}
.stuff {
outline: 2px dotted white;
width: 30%;
max-width: 210px;
min-height: 100%;
position: absolute;
/* flex-shrink: 1;
flex-basis: 210px; */
display: table-cell;
}
#col1 {
left: 1em;
top: 1em;
}
#col2 {
left: 36%;
top: 1em;
}
/*.stuff:first-of-type {
order: 1;
}
.stuff:last-of-type {
order: 2; */
}
/* The HTML shows that the second column (the second .stuff) would be */
/* in-between .aside and the edge of .colMain. Instead of moving it out of */
/* the way in markup (HTML), I used the flexbox property, order. */
<main>
<div class="colMain">
<div id="col1" class="stuff">stuff</div>
<div class="aside">aside that must extend all the way to the right until it reaches the window limit</div>
<div id="col2" class="stuff">stuff</div>
</div>
</main>
There are three problems in one:
First problem.
How to transform a middle content
<div class="wrapper">
<div>stuff</div>
<div class="aside">Middle content</div>
<div>stuff</div>
</div>
in a right column that expends to the right without overflowing out of the window, when the rest of the past column "wrapper" must be a centered column of fixed width.
<div class="colLeft"></div>
<div class="wrapper" style="text-align:center; width:700px;">
<div>stuff</div>
<div>stuff</div>
</div>
<div class="aside">Middle content now to the right</div>
Absolute positioning doesn't help because without fixed sizes (% or px), it is out of the flow and the content of variable width won't adapt to the situation (and overflow).
This can be easily solved with display table.
Second problem.
Display table/table-cell leads to the second problem.
To make three "columns" with display:table-cell, order is really important. That means the "aside" div must be the last element of its column (the wrapper column in my first snippet) in order to make it an independent cell of a row put to the right. If you don't have to worry about this story of middle content and you just have to switch a content at the end of a div to the right or a content at the beginning to the left, it's already over.
You just have to style colLeft, wrapper and aside of my second snippet with display:table-cell and use another global wrapper with display:table and some other styles like table-layout:fixed and width:100% to do the trick. With a media queries for small screen, you just have to hide the colLeft with display:none.
But if you need that middle content to be a middle content nonetheless on small screens and a right column on large screens, it's a different case.
This can be solved with anonymous table objects and table-header/footer/row-group.
With table-header/footer/row-group, you can reorganize your rows so you can put the "aside" at the end to transform it in an independent cell on large screens and place it in the middle with table-row-group on small screens:
.header{
background-color:green;
display:table-header-group;
}
.footer{
background-color:green;
display:table-footer-group;
}
.aside{
background-color:red;
display:table-row-group;
}
<div class="header">stuff</div>
<div class="footer">stuff</div>
<div class="aside">Middle content</div>
Third problem.
The hardest problem is the centered "column" of fixed width. With table-xxx-group, it is forbidden to put a wrapper around the table-header-group and table-footer-group to set a width of 700px because table-group are row elements and the wrapper will automatically becoming a table object, excluding the "aside" that won't be able to insert itself in the middle with its table-row-group style on small screens.
Without putting a wrapper around the "stuff", you won't be able to control the width of the created anonymous cell on large screens because you can't style something anonymous. So it takes a width of 1/3 like each cell.
main{
display:table;
table-layout: fixed;
width:100%;
}
.colLeft{
background-color:yellow;
display:table-cell;
}
.header,.footer{
background-color:green;
/*no display style > it will create an anonymous cell
object around the header/footer elements*/
}
.aside{
background-color:red;
display:table-cell;
}
<main>
<div class="colLeft"></div>
<div class="header">stuff</div>
<div class="footer">stuff</div>
<div class="aside">Middle content now to the right</div>
</main>
The solution is to use table-column-group/table-column. You will be able to style your columns and set a width to the middle column even though it is determined anonymously.
The solution
Small screens
.rowTabled{
display:table;
table-layout: fixed;
width:100%;
}
.header{
background-color:green;
display:table-header-group;
}
.footer{
background-color:green;
display:table-footer-group;
}
.aside{
background-color:red;
display:table-row-group;
}
.colLeft, .colgroup{
display:none;
}
<main>
<div class="colgroup">
<div class="colCol left"></div>
<div class="colCol middle"></div>
<div class="colCol right"></div>
</div>
<div class="rowTabled">
<div class="colLeft"></div>
<div class="header">stuff</div>
<div class="footer">stuff</div>
<div class="aside">asideeeeeeeeeeeex eeeeee eeeeeeeee eeeeeeeeeeeeee</div>
</div>
</main>
Large screens
main{
display:table;
table-layout: fixed;
width:100%;
}
.colgroup{
display:table-column-group;
}
.colCol{
display:table-column;
}
.middle{
background-color:green;
width:100px;
}
.left,.right{
background-color:yellow;
}
.rowTabled{
display:table-row;
}
.colLeft{
display:table-cell;
}
.aside{
background-color:red;
display:table-cell;
}
<main>
<div class="colgroup">
<div class="colCol left"></div>
<div class="colCol middle"></div>
<div class="colCol right"></div>
</div>
<div class="rowTabled">
<div class="colLeft"></div>
<div class="header">stuff</div>
<div class="footer">stuff</div>
<div class="aside">asideeeeeeeeeeeex eeeeee eeeeeeeee eeeeeeeeeeeeee</div>
</div>
</main>
My footer will not stick to the bottom of the page in the latest Firefox, while it works in Chrome and IE11. From what I can tell the min-height:100% for the wrapper has no effect in Firefox.
HTML
<div id = "wrapper">
<div id = "content">
</div>
<div id = "push">
</div>
</div>
<div id = "footer"></div>
CSS
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -235px;
}
#push{
height:235px;
}
#footer{
position:relative;
height:235px;
width:100%;
}
It's hard to say by the posted code but according to CSS level 2 spec:
10.7 Minimum and maximum heights: 'min-height' and 'max-height'
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').
Hence you should make sure that the parent of #wrapper has an explicit height. If the #wrapper is located in <body>, try specifying height: 100% on <body> and <html> elements as well:
html, body {
height: 100%;
}
Because a percentage value for height property is relative to the height of the generated box's containing block as well, in this case the <html>. Otherwise the value computes to auto.
In addition, using height: auto !important; and height: 100%; together doesn't make sense and they're pointless; So it's better to remove them.
#wrapper{
min-height: 100%;
margin: 0 auto -235px;
}
Finally if it didn't work, you could give the following approach a try:
Position footer at bottom of page having fixed header
Let's simplify what you have a little.
Your #push can be replaced with the pseudo element :after on your wrapper.
Remove the height on the wrap and avoid !important.
html,body needs to have a height of 100% in order for other elements to have percentage heights
Have an example!
HTML
<div class="wrap">
<!-- main content -->
</div>
<footer class="footer"></footer>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
min-height: 100%;
margin-bottom: -235px;
}
.wrap:after {
content: "";
display: block;
}
.footer, .wrap:after {
height: 235px;
}
.footer {
background: #F00;
}
If you are trying to have your your footer stick to the bottom, use:
#footer{
position:fixed;
bottom:0;
height:235px;
width:100%;
}
I just tried it with your code and verified that it works on the latest firefox.
I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed.
How can I get the scrollbar to be limited to the content DIV.
Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.
I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?
http://jsfiddle.net/sA5fD/1/
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
}
#more {
display: none;
}
#content {
display:table-row;
height:100%;
background:#8f8;
}
It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.
If you add two wrap blocks:
<div id="content">
<div id="content-scroll-wrap">
<div id="content-scroll">
content...
Then use CSS:
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
http://jsfiddle.net/sA5fD/8/
Don't know about support in old browsers. IEs might need some fixes.
For future visitors:
HTML
<div class="parent">
<div class="child">
<div class="large-element> </div>
</div>
</div>
CSS
.parent {
height: 1000px
overflow-y: scroll;
}
.child {
background-color: royalblue;
height: auto;
}
.large-element {
height: 1200px;
}
In this scenario, the child element will create an overflow. Since the child's height is set to auto, it will stretch out to fill the container. If you had set it to 100%, it would only go 1000px, leaving some white space beneath!
Here is a pen: https://codepen.io/meteora/pen/JJYoZM
This should work in all browsers :)
I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.
My code so far (I used colors as a visual aid)-
css:
#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }
html:
<html>
<body>
<div id="leftside"> </div>
<div id="container">the content</div>
<div id="rightside"> </div>
...
So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?
Thanks for the help.
you can achive by doing this with css
#maindiv{
width:1000px;
}
#rightdiv, #leftdiv{
width:calc((100%-1000)/2);
}
#rightdiv{
//other styles
}
#leftdiv{
//other styles
}
test browser support for calc()
You'd have to inject some javascript code:
$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);
See demo
Then use media queries to change the middle div's width when the screen gets smaller.
One way is to put the divs in a table with one row and 3 cells. The table will have width 100% and you can set the width of the centre td.
I'm sure someone will suggest a better way in CSS though.
I'm trying to force my content div to fill the whole wrapper div.
The wrapper is set up to force my footer to the bottom of the window, or page. Which it does just fine.
If I use:
min-height: 500px (or 40em); the content div stretches as requested.
However, if I use:
min-height: 100% (or any other %); nothing happens to the content div.
This makes no sense to me. What am I missing?
Per the request (excluding borders and colors and stuff):
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto -4em;
}
#content {
min-height: 100%; // nothing happens, change to em or px something happens.
}
#sidebar {
float: right;
}
#footer {
clear: both;
height: 4em;
}
#push {
height: 4em;
}
<body>
<div wrapper>
<div header>
<div menu></div>
</div>
<div sidebar></div>
<div content></div>
<div push></div>
</div>
<div footer></div>
</body>
You can try using "line-height: 100%" on your content div. Although... if there is an explicit height set on your wrapper div, you should be able to use 100% on one of the various height measurements to force it to expand.
Post some quick example markup that shows your wrapper and your content.