On my website I have a center and a right column. The center and right columns are surrounded by a <div> element with id = wrap. The surrounding div element is centered using the following CSS technique:
#wrap{
position:absolute;
left:50%;
margin-left:-307px; /* 307px = half of 594px(width of #center_column) */
}
This works fine except that when the browser is resized to a width less than that of the surrounding <div> element then the left section of the page is cut off and cant be viewed by scrolling horizontally
you could try to give body or an overall wrapper if you have one a min-width of centre column (594px) + 2 x right column width
trouble is with a absolutely positioned layout the page doesn't actually know the divs exist, they're like post-it notes stuck on the screen, so you have to give it something "real" to scroll to
[Update]
I'm not quite sure how you're doing the positioning, but you shouldn't need to [absolutely] position the center column at all, then you can use the margin: 0 auto; method of centering.. then you put the right column inside the centered column, at the bottom, and position the right column off to the right.. the screen then keeps your layout centered and scrolls if the right sidebar gets covered over
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Centered with right Sidebar </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
#wrap{
width: 594px; /* width of center column only */
margin: 0 auto;
position: relative;
border: 3px solid #eee;
height: 400px /* demo only add content for real height */
}
#rightcol {
position: absolute;
right: -260px; /* adjust to suit allowing for borders */
bottom: 0;
border: 3px solid #ff0;
width: 250px;
height: 300px /* demo only */
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<div id="rightcol">Right sidebar</div>
</div>
</div>
</body>
</html>
another technique to center:
#wrap {
width: 614px ;
margin-left: auto ;
margin-right: auto ;
}
and the div will always be visible or scrollable when the browser is resized.
Related
as per screenshot attached:
I want to create a <div> that is positioned "x" pixels from the top, but essentially "expands" vertically to fit whatever is in a given tab as well as horizontally the width of the whole page with a solid colour. Essentially a <div> that ignores the other <div>'s. Screenshot explains what I mean better. How do I make such a <div> layout?
A sticky footer looks to me what you are looking for. This means you have a content area that is either the entire screen or if it has more contents, fits the content. The footer is either on the bottom of the screen or on the bottom of the content
http://www.cssstickyfooter.com/
or search for stickyfooter on Stack Overflow
And abit of html to get you started
http://jsbin.com/emufot/8/
Standard CSS should do the job for you as if you don't set a height for a div, it will automatically expand to fit its content. Here is some code I knocked up quickly which will display the idea:
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<style>
body {
margin: 0 auto;
padding: 0;
}
p {
margin: 0 auto;
padding: 0;
}
.topstuff {
height: 200px;
background-color: #333333;
margin: 0 auto;
padding: 0;
}
.contentContainer {
width: 100%;
background-color: #ff0000;
margin: 0 auto;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.footer {
height: 200px;
background-color: #00ff00;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="topstuff"></div>
<div class="contentContainer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper placerat ligula volutpat aliquam. Maecenas vulputate, nibh at iaculis placerat, ligula nisl sodales odio, quis adipiscing purus dolor venenatis nunc. Proin vehicula rhoncus eros tristique aliquet. Vivamus faucibus hendrerit orci eget egestas. Nulla commodo lectus vitae nunc condimentum pharetra. Donec mattis nulla orci. Proin tortor nulla, varius at mollis ac, vestibulum vel leo. Cras ut rutrum sem. Sed vulputate nisi sed leo aliquam ac fermentum tellus porta. Phasellus quis purus et purus sollicitudin tristique a quis sem. Nunc malesuada, eros ac venenatis consequat, erat elit viverra sem, vitae commodo justo orci nec neque. Proin sed aliquam tellus. In tincidunt urna sit amet felis lobortis fringilla elementum massa egestas.</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Just replace the 'lorerm ipsum etc' content with whatever you want to see the containing div change size.
Good Luck.
I have a text block in a div that is floated to the right. The div should align to the top but it has bumped down about 100px. See the text box next to the red flower here: http://174.121.46.122/~flowerwo/inside.html
I tried absolution positioning but when I do the background image disappears. It should be obvious where the text needs to be but it won't align properly.
Here is the html:
<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3>Headline</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" />
</div>
</div>
</div><!-- end small box -->
Here is the CSS:
#small-box {
width: 625px;
position: relative;
margin: 10px 0 0 5px;
background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }
img.small-box-photo { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box
Any help getting this to align properly to the top will be appreciated.
{ width: 300px; float: right; margin: 0 30px 0 0; }
#small-box-bot => display: table;
img.small-box-photo => float: left;
It does work as expected for me. Take a look at this example. Doesn't it look like what you try to achieve? If no, give more information and, preferably, the link to online version where we can see the issue.
UPDATE AFTER THE ONLINE EXAMPLE.
So, in the example you gave, there is the problem with clearing happening when:
the #r-box-lower clears the right floating with clear: right
the #r-box-lower sits at the same DOM level as #small-box, containing the weirdly shifted block of text
because of the p.1 and p.2 the #text-box is being cleared by #r-box-lower that makes it start right where #r-box-lower starts.
So, to fix the issue, you need to wrap #right-box and r-box-lower into a shared div like:
<div id="right-column" style="float: right; width: 192px">
<div id="right-box">
…
</div>
<div id="r-box-lower">
…
</div>
</div>
Surely, you want to move those inline styles into your stylesheet.
Here is my markup:
<div class="wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
</div>
<div class="adverts"></div>
<div class="clear"></div>
</div>
Fiddle here -- feel free to modify and test
I want a CSS solution that makes the content width equal to max available width or max available width - 120px depending on whether adverts div is present or not. The div may or may not be present depending on whether the page is supposed to show ads or not. The solution must work in older versions of IE.
#Salman, if you rearrange the order of the two divs then you can do this without any widths, you just float:right the "adverts" div and don't float the content
as per one of the other answers you cannot right float a div after an unfloated one in IE to achieve this same effect without a width/margin being involved
added: Here's Your example fiddle updated : http://jsfiddle.net/clairesuzy/EqYnw/8/
Example Fiddle
The jQuery just toggles the actual ad-element to show that if there no content in the adverts div it will collapse the overflow usage is explained in the code.
I'm not sure if your "not present" div is the actual "adverts" div or the elements inside it, but this should work for both as the content will default to 100% of whatever is left over
Code for info:
CSS:
html, body {margin: 0; padding: 0;}
.wrapper {
overflow: hidden;/* Makes wrapper contain its floated children */
zoom: 1; /* Makes wrapper contain its floated children in IE6 and below */
border: 1px solid #666;
background: #ddd;
}
.content {
border: 1px solid #000;
background: #fff;
overflow: hidden; /* to not wrap under adverts if content is longer - optional if you want the wrap */
zoom: 1; /* equivalent of overflow for IE6 and below */
}
.adverts {
float: right;
border: 1px solid #00c;
}
/* put any widths on the actual advert element */
.ad-element {width: 200px; height: 30px; background: #0f0;}
HTML:
<div class="wrapper">
<div class="adverts"><div class="ad-element">.</div></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi ipsum, gravida quis eleifend at, vestibulum at nibh. Nunc faucibus pellentesque nunc, vitae ultricies nibh interdum eu. Proin a est sed eros suscipit pretium ac sit amet tortor.</p>
<p>Vivamus feugiat, neque non tincidunt iaculis, dolor ipsum convallis libero, condimentum malesuada leo nulla a turpis. Praesent sed metus ipsum. Cras semper condimentum mauris. Nulla eleifend blandit facilisis. Phasellus gravida tempus eros, molestie cursus nisi imperdiet non. Donec dapibus.</p>
<button>Show hide ads div</button>
</div>
</div>
I assume column 1 is the content of div.content, there's at leas two ways you can get this to use max available space when the second column (div.adverts) is empty.
You can let the wrapper and content be non-floating, and let the adverts one float to the right. The non-floated divs should use all available space, and the right float should cause the text to wrap around it. As long as the adverts div (when not empty) is taller than the content it will appear as two columns. (I assume the clear div is a float clearing hack or something?)
You could also use a table (not politically correct, but a lot easier to make it work in older browsers). Let the table be 100% widht, and don't specify any widht for the table cells. An empty cell should use zero space. (This will give a two column layout even if the lenght is different without any complicated css)
In any case: To avoid bugs where defining styles for an empty element causes it to be visible, style the sub elements instead, if they're not present the css will not apply anyway, like this:
/*gives all direct subchild divs 300px widht*/
.adverts>div{ width: 300px; }
You could use the general sibling selector + for the case the .advert div is not in the HTML at all.
Let the .advert float right, and have it before your .content div in the HTML (for CSS selector)
<div class="wrapper">
<div class="adverts"></div>
<div class="content"></div>
</div>
.content
{
float: left;
width: auto;
background-color: cyan;
}
.adverts
{
float: right;
width: 120px;
height: 600px;
background-color: lime;
}
Use the sibling selector to define the smaller width if the .adverts div exists.
.adverts + .content {
width: 130px;
}
This will not work dynamically with show() and hide(). If you require that dynamically, you have to remove the .advert from the DOM.
Here is a fiddle with a demonstration using detach() instead of hide() (worked on a VM in IE6).
Using CSS, how can I display an image behind some text and also offset it on both the X and Y axis?
I have a design that is 950px wide, so I'm wanting want this image to remain 'in sync' with the rest of the header by placing it in a container that is centered and also 950px wide.
My problem is that instead of the image being 'a layer behind' the header text, it is instead displaying the image in full and pushing the rest of the contents down.
Any help is greatly appreciated.
IMAGE ADDED FOR CLARIFICATION
Thanks,
Andy.
use Percentage values in your background positions in your css
.divName {
background-position: 50%;
}
or using words like top or bottom ...
See the full list of values here
UPDATE;
use the image as a background image instead of inline html image
<div class='content'>
<p> Some content</p>
<p> More content</p>
.... even more content ...
</div>
Now the css:
div.content {
background-image: url('image path');
background-position: 50%;
}
This way the image will always be behind the content, and it will be in the center of the div.
See: http://jsfiddle.net/Fx5q3/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
CSS:
#container {
width: 300px;
margin: 0 auto;
background: #ccc;
background: rgba(127,127,127,0.7);
position: relative
}
#behindImage {
background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat;
width: 150px;
height: 150px;
position: absolute;
top: -30px;
left: -90px;
z-index: -1
}
HTML:
<div id="container">
<div id="behindImage"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero. Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque adipiscing.</p>
</div>
Do you mean something like this example?
Oke, that's more clear. Now I'm pretty sure this is what you want.
Given the following html:
<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>
I want the 2nd div to take the remainder of the width off the page. Setting width 100% will make it wrap to the next line, and I don't know what else to set to fix it. The left column needs to be sized according to its content, while the right takes the reminding horizontal space.
I know I can do this with tables, but in the actual application, this causes other problems in IE6. In the application the left column is a tree, while the rest is the main view. The tree can be collapsed. In addition there are popup divs using Dojo. When a popup div is showed and moved, the right column (in table form) expands to overlap the left column in IE6. Yeah, this is a bug in IE, so I am trying to find an alternative layout to fix this issue. It works with divs, but now the main view doesn't expand to fill the screen in other browsers.
Here is a better broken version. I need to fix it so that table doesn't extend the page width and adds a horizontal scroll for this:
<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>
This sounds precisely like the sort of problem flexbox is able to fix. Below I'm using standard flexbox syntax, but some legacy browsers may require prefixes in order to function properly.
<div class="columns">
<div class="column">
<p>Hello, World.</p>
</div>
<div class="column">
<p>Content Area</p>
</div>
</div>
.columns {
display: flex;
}
.column:nth-of-type(2) {
flex: 1;
}
This gives you the results you are looking for: one column that grows with its content, and another that simply takes up the remaining space. One suggestion here would be to apply a min-width value to the flexed column to prevent it from getting too small.
Demo: http://codepen.io/anon/pen/LglvH
Try this:
<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>
This way your right div will take up the remainder of the space. But you will have to watch out for clearing.
In this solution, we have an auto-filling #left element which will fit #container. #right will be absolutely positioned over #left such that it always at the top right of #container. Furthermore, we have padding-right: Xpx; on the #left container so that its content never slips underneath #right.
CSS
#container {
position: relative; /* used to make the #right element absolutely position relative to #container */
}
#right {
width: 100px; /* define width */
position: absolute;
right: 0px;
top: 0px;
}
#left {
padding-right: 100px; /* match defined width */
}
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
It looks like you need a table. I think you should try to solve your issues with ie6 and tables instead.
Try this:
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin:0;
padding:0
}
html, body {
height:100%
}
#left {
background:red;
float:left;
height:100%;
overflow:hidden
}
#right {
background:blue;
height:100%
}
</style>
</head>
<body>
<div id="left">
<p><img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="Google" /></p>
</div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit massa vel nisi suscipit tincidunt. Proin tortor massa, pellentesque eget pharetra et, rutrum eu purus. Pellentesque iaculis justo a erat ultricies sodales. Nunc eu justo felis. Nullam fermentum erat sed ligula interdum consectetur imperdiet odio sagittis. Mauris sodales magna ornare dui imperdiet pretium. Donec augue erat, suscipit at aliquet vel, sodales id lorem. Aenean id fermentum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin hendrerit ligula a neque placerat condimentum at ornare odio. Etiam metus augue, fringilla malesuada vestibulum eget, gravida sed mauris. Pellentesque non orci eget libero placerat vehicula. Vivamus iaculis bibendum risus, ac venenatis tellus consequat convallis. Nam tristique eros quis odio commodo venenatis. Suspendisse volutpat euismod mi eu facilisis. Quisque malesuada libero quis est suscipit et cursus augue rhoncus. Pellentesque molestie convallis nibh at pretium.</p></div>
</body>
</html>
There is only a little gap between the div's in IE6.