(Apologies for the title. The problem is much more easily demonstrated than named.)
I have two elements: a content container (#content) and an ads container (#ads). The content container will be on every page of a site. The ads will be on some pages and are of a fixed width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
border: 1px solid blue;
}
#ads {
float: right;
border: 1px solid lime;
}
.ad {
width: 100px;
height: 100px;
background: gray;
}
#content {
overflow: hidden;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<ul id="ads">
<li class="ad">Buy Coke</li>
<li class="ad">No, Buy Pepsi!</li>
<li class="ad">Coke bought more ad space</li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
(Alright, I admit that this isn't really my code, but the content/ads simplification makes my question a lot more straightforward.)
What I have here is basically a perfect setup in that it allows for the #ads list to be removed, and the #content to naturally reflow to take up its space. Furthermore, I have not specified the width of #content anywhere in the stylesheet. This offers an extra degree of flexibility: the layout can be used with a container of any width.
But I'm a perfectionist; I don't want the ads to come before the content in source order.
My question: is there a way to accomplish this layout that satisfies the following requirements:
#ads follows #content in the source
Removing #ads from the source results in #content taking up the entire width of its parent (#container) without CSS changes
The width of #content is not explicitly written into the CSS (i.e. The only change needed to make the page wider is to modify #container's width)
if you're not scared of css3 (basically meaning, you don't have to bother about ie) this is indeed possible:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
.content{-moz-box-flex:1; background:red;}
.ads{background:blue; width:100px;}
</style>
</head>
<body>
<p>with ads:</p>
<div class="container">
<div class="content">content</div>
<div class="ads">ads</div>
</div>
<p>without ads:</p>
<div class="container">
<div class="content">content</div>
</div>
</body>
</html>
this is firefox only, be sure to apply the corresponding vendor prefixes (-webkit-, -o-) for other browsers. to make this work in ie though there will be some javascript to write.
requirements 1 & 3 are contradicting each other. if you want that #ads follows #content in the source and not provide width to #content then ads will be shown below the content and not in the right.since #content doesn't have width it will occupy full width of container. I think you need to give away with requirement 1.The way it is done now is absolutely fine.
Related
Is there a CSS only trick to make this happen:
An element is placed in position absolute x,y on the screen. The document has a vertical scroll depending on its content. Can the height be controlled based on the available visible viewport area?
Exampe 1:
Exampe 2:
HTML:
<div id="dialog">
Change my height with no JS :)
</div>
<div id="content">
... content
</div>
JS Fiddle: https://jsfiddle.net/8dj4xz2q/
yes it is you can do this using VH property and also using css calc to calculate right height.
check out the snippet.
#content{
font-size:100px;
color:#CCC;
}
#dialog {
position:absolute;
top:100px;
left:100px;
border: solid 1px red;
height:calc(100vh - 130px);
overflow-y:scroll;
width:200px
}
<div id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
. I need to create a section wherein the pink box is between a white and blue section. So I decided that maybe flex is the best way to do this (correct me otherwise). When seen in mobile I'm expecting the whole pink box width will be 100% and the left and right (white /blue) section will be hidden.
somehow related to codepen.io/Paulie-D/pen/LNQMML but I need the bigger box in the middle. and the left and right boxes hides on mobile.
Appealing to your statement: So I decided that maybe flex is the best way to do this (correct me otherwise)
That is really easy to do with modern CSS3 and HTML5 semantic tags.
body{
margin: 0;
padding: 0;
}
section{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
div:nth-child(2){
grid-row: span 2;
}
.colorp{background-color: #fd79a8;}
.colorw{background-color: white;
}
.colorb{background-color: #0984e3
}
#media only screen and (max-width: 600px){
section{
display: grid;
grid-template-columns: 1fr;
}
div:nth-child(2){grid-row: span 2;}
.colorb{display: none;}
.colorw{display: none;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<main class=" color">
<section>
<div id="element1" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element2" class=" colorp"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element3" class=" colorw"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element4" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="element5" class=" colorb"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>
</main>
</body>
</html>
You can see how it works in this pen GO TO CODEPEN
So I'm new to web-oriented coding and learning HTML/CSSfrom a book, I've come to the chapter about creating columns and using their properties.
I'm testing my code on a 3-pages website and when it came to editing the text into columns I am stuck for how to set column-witdh.
Here is the code I used and the css
section {
column-count: 3;
column-width: 3em;
}
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Test colonne</title>
<link rel="stylesheet" type="text/css" href="css_colonne.css">
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</body>
</html>
Can anyone see what's wrong (it doesn't work either with -moz-column-width)
Column division works but it never works
The column-width CSS property specifies the minimum column width.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Demo
.wrapper {
width: 9em;
}
section {
column-count: 3;
}
Instead of explicitly setting column width, use a container element.
I am working on a layout with the following attributes:
Fixed header (content should scroll up under it)
Fixed 100% height column (left menu)
Content area
Footer that A. sticks to bottom if content is short, or, B. is pushed down with longer content (off screen)
I have managed to get 1,2,3 and 4 A. working. But I can't get the footer to get pushed down by the longer content. I based my initial workings on css reset (example here:http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/), but, I am assuming that my fixed header and left column are not helping.
I'd really appreciate any pointers/suggestions on how I might overcome this.
Here is my code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>
<style type="text/css">
html,
body { height: 100%; padding:0;margin:0; }
#sc_admin_wrapper {
min-height:100%;
position:relative;
background:#fff;
margin: 0;
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}
#sc_admin_logo {
width:20%;
float: left;
}
#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content {
float: left;
margin:50px 0 0 20%;
width: 77%;
padding: 0.5% 1.5% 30px 1.5%;
}
#sc_admin_footer {
background: #ffcc00;
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%;
padding: 0 1.5% 0 1.5%;
}
</style>
</head>
<body>
<div id="sc_admin_wrapper">
<div id="sc_admin_header">
<div id="sc_admin_logo"><h1>Fixed header</h1></div>
<div class="clear"></div>
</div>
<!-- / #sc_admin_header -->
<div id="sc_admin_menu">
<p>Fixed height column at 100%;</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_menu -->
<div id ="sc_admin_content">
<div id="sc_msgs"></div>
<p>This would be my short or long content.</p>
<p>I should scroll under the header.</p>
<p>My footer should be fixed at the bottom of the screen if content is
short, or, scroll should the content be longer.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_content -->
<div id="sc_admin_footer">
This is my fixed footer
<div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>
Hmmm, I think you you almost got it right! You just missed a couple CSS/structural details. You need to add a style definition for the .clear class, as follows:
.clear{
clear:both;
}
Then, you need to move the .clear div element at the bottom of .sc_admin_content out of it, so that it lies in between .sc_admin_content and .sc_admin_footer.
Here's a JSFiddle example of what this would then look like. (Try deleting content and pressing "Run", and see that the footer stays stuck to the bottom!) If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
Use four z-layers in your code:
At the top, put your text with opaque background.
In the layer below it, put one copy of your footer using position: fixed; in its class.
In the layer below that, have a div that is height: 100%; width: 100% and is opaque (i.e., has the same background color as your text) and travels with your text on scroll.
In the layer below that, put another copy of your footer that will travel with your text on scroll.
The z-order of these elements might not produce the exact effect, but it should point you in the right direction.
i m having an issue with IE 9 related to the browser's zoom function.
In the code below,i have a set of divs (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide).
The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%)
The inside divs are repositioned during the zooming and the initial position is lost.
Please notice that this behaviour only occurs in IE.
I ve tried to set the distances using percentages instead of pixels , again with no result.
Is there a way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>