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>
Related
Someone with no coding experience is trying HTML. I feel really stupid to ask this question, but I am stuck on this for two weeks.
A picture says more than a thousand words. I made a page in a web builder, but I want to replicate it in HTML (with bootstrap 5). I want an image fullscreen left half and text right half of the screen.
Now I tried it in HTML. I used 2 col-md columns in a row that will stack when the device width gets below 768px. The first column has a full height and full width (50% when device wider than 768px) image as background. Second column has text. I want the image to stay full height, no scroll on the left side of page. I used this code:
<body>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md plaatje vh-100"> </div>
<div class="col-md text-center px-5 py-5">
<h1>
<b>NAME</b>
</h1>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat.
</p>
</div>
</div>
</div>
<style>
.plaatje {
background: url("https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</body>
The problem is that when the viewport in the browser is smaller than the text on the right side I can scroll the image and see white bars above and below the image. Please help me get it fixed. (I used a background image, but maybe that is not the best way. Feel free to change that.)
i didn't really understand your question 100%, but made a Code Snippet with HTML and CSS from what i understand. In my CSS i used vw (view width to make it responsive) and for the padding "rem" (font size) instead of px to make it responsive.
-Noel
body {
height: 100vh;
width: 100vw;
margin: 0;
}
.left {
position: fixed;
height: 100%;
right: 50vw;
top: 0;
bottom: 0;
left: 0;
background-image: url("https://www.vitality-club.nl/wp-content/uploads/2021/11/IMG_9218.jpeg");
background-position: center;
background-size: cover;
}
.right {
float: right;
width: 50vw;
padding: 0 2.5rem 0 1rem;
box-sizing: border-box;
text-align: center;
}
<body>
<div class="left"></div>
<div class="right">
<h1>NAME</h1>
<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>
<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>
</body>
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 am creating a navigation panel that'll stay fixed when scrolling down. Here's the code.
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
And here's the css
header {
position: fixed;
max-width:960px;
}
.logo {
float: left;
}
nav {
float: right;
}
I want to have the logo on the right side and the navigation menus on the right side.
Right now, the float seem to work, but the nav elements appear right after the logo instead of being floated to the right edge.
If I remove the position:fixed code from header, the floating seems to work fine.
This would be the solution using flexbox instead of float:
header {
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
}
.logo {
align-self: flex-start;
}
nav {
align-self: flex-end;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
And you will need to remove the clear: both; from the HTMl. Let me know if it works!
As mentioned by #AngelMdez, Flexbox is a better way to go than Floats, position: fixed should work all the same; just keep in mind that you should specify a width so the element itself uses the space you expect.
After that you can remove all the float and clear properties and it should be fine.
body {
margin: 0;
}
header {
position: fixed;
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
background-color: gray;
}
.content {
padding-top: 70px;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
<div class="content">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
Original Example with Floats
header {
position: fixed;
width: 100%;
max-width: 960px;
background-color: lightgray;
height: 60px;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
<div class="content">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
To answer your question: Most HTML elements have default styling provided by the browser called the User Agent. The <header> has a default display value of display: block;. An element with display: block grows to its maximum width relative to its container.
In this case the container of <header> is the <body> which takes its width from the <html> which takes up the whole viewport.
Because you've set the max-width to 960px the element will grow to only 960px. This works fine, as the width is normally taking up the whole viewport. But as soon as you set an absolute position, in this case `fixed, the element is taken out of the normal document flow. Because it's now sticking to a fixed position. Meaning that it has no parent with a width. So it loses its inherited width by its parent ( the body ).
To solve your problem with the code you've already written, just add a width to the element. Because you've already set a max-width: 960px; you can tell the element to grow to 100% with: width: 100%;. It will stop at 960px because that's its maximum-width:
header {
position: fixed;
width: 100%;
background: blue;
}
a {
color: white;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
I have an issue with my HTML/CSS code. I have a parent div (secClass)and within that I have 2 child divs(secClass1 and secClass2). The problem is that the contents of the child divs are not being contained in the parent div. Do you know whats the issue here? I have included the screenshot and code for reference.
div.secClass {
background-color: 806815;
height: 1000px;
}
div.secClass1 {
background-color: D4BD6A;
display: inline-block;
}
div.secClass2 {
background-color: D4BD6A;
display: inline-block;
}
<div id="section" class="secClass">
<div class="secClass1">
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 class="secClass2">
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>
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
div.navClass
{
float:left;
background-color:D4BD6A;
width:150px;
height:700px;
}
div.navClassItems
{
text-align:center;
}
Since you have your navClass float left, the issue is that the secClass div cannot fit since it is 100% width by default. If you conceptually make it 100% - 150px, your secClass div will pop up into that spot. For example:
#Wrapper{
...
width:1000px;
...
}
.navClassItems {
...
width:150px;
...
}
.secClass {
...
width:850px;
...
}
With
<div id="wrapper">
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secClass">
<div class="secClass1">
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 class="secClass2">
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>
Do not forget to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.
Sorry, I just saw I misnamed the .navClassItems to .navClass. Should be more accurate now.
(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.