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.
Related
So I'm trying to set the height of the "content" class but it doesn't seem to be working. I'm quite a noob at nested DIVs and I've tried the fixes that I've found googling but nothing seems to work. Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
body {
background-mage: url(bg.jpg), url(bgrepeat.jpg);
background-repeat: no-repeat, repeat-x;
background-attachment:fixed;
background-position:left bottom;
background-color: #D3C8B6;
}
#wrapper {
text-align: center;
width: 100%;
position:absolute;
bottom:0;
}
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#header {
margin-bottom:1%;
height:100px;
}
#footer {
margin-top:1%;
height:40px;
}
#main {
width:20%;
height:475px;
margin-right:1%;
text-align: center;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#sidebar {
width:79%;
height:475px;
overflow: hidden;
}
.viewport{
width:100%;
height:475px;
overflow-x:scroll;
}
.inside{
width:9000px;
height:200px;
}
.inside div{
height:450px;
width:700px;
float:left;
margin-right:4px;
}
.content {
height:100px;
width:300px;
overflow-y: scroll;
position:relative;
top: 10px;
right:10px;
}
.one{
background-image: url(images/frame.png)
}
.two{
background-image: url(images/frame2.png);
text-align:center;
z-index: 1;
}
.three{
background-image: url(images/frame1.png);
}
.four{
background-image: url(images/frame3.png);
}
.five {
background-image: url(images/frame4.png);
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div class="one-l">Home</div>
<div class="two-l">Portfolio</div>
<div class="three-l">Resume</div>
<div class="four-l">Blog</div>
<div class="five-l">Contact</div>
</div>
<div id="sidebar">
<div class="viewport" >
<div class="inside" >
<div class="one">home</div>
<div class="two">
<div class="content" width="200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum, leo vitae ornare dignissim, lorem urna tempor felis, in fringilla urna justo non velit. Cras imperdiet viverra ligula, vitae auctor neque elementum eget. In nec quam est, quis molestie magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida, elit a iaculis consequat, ligula nisl cursus turpis, in giat eu placerat vel, viverra vel nibh. Ut vitae felis ac nisi euismod porta. Aliquam et gravida mauris. Maecenas id massa ligula, et blandit orci. In hac habitasse platea dictumst. Donec eu tortor libero. Donec eget leo mi. Mauris quis neque vitae massa facilisis placerat ut et felis. Nullam eleifend faucibus diam, sit amet pellentesque leo euismod id. Morbi interdum placerat nibh, in mattis sem eleifend quis. Nunc non nunc sed lorem condimentum molestie mattis blandit dui. Nulla urna ligula, auctor id venenatis eu, placerat ut dui. In fringilla purus gravida sapien cursus imperdiet porta ligula lobortis. Sed pellentesque, nisi quis tristique pulvinar, justo odio sollicitudin risus, non euismod dui ante nec tortor.
</div></div>
<div class="three">resume</div>
<div class="four">blog</div>
<div class="five">contact</div>
</div>
</div>
This is happening because the height property defined in .inside div takes precedence. In this case, to make the height property work inside class .content you must do something like this:
.content
{
height: 200px !important;
}
You can see a Demo at JS Bin: http://jsbin.com/exucek/1/edit
Try changing the height property value to see it being applied in real time. You'll see that when the value is too small, scroll-bars appear.
If you're curious about that !important CSS rule, take a look here:
What does !important mean in CSS?
Your CSS will use whatever the most specific rule is.
You have specified a height on
.inside div
which is more specific than
.content
where you are also setting a height.
In order to have your CSS use the height you have set for .content, you need to make the selector more specific, like so:
.inside div{
height:450px;
width:700px;
}
.inside .content {
height:100px;
width:300px;
}
that should do the trick.
you have a mistake in your code!
replace <div class="content" style=" width:200px;" > with
<div class="content" width=200 >
or change your css code:
.content {
height:200px;
}
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.
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.
I have a fixed width parent div within which I am floating right an image with the tags:
<div style="width: 200px;" class="buggybox imgr" id="g0">
<img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>
with the expectation that the text will wrap around the image.
Unfortunately, IE7 floats the image outside the RHS boundary of the parent div (see http://horticulture127.massey.ac.nz/ie7view.png) whereas FF and Safari display the float and wrapped text within the parent div's boundary (the black vertical lines are the LHS/RHS boundaries of the parent div.
How do I fix this CSS fault? There's just so much info available about IE6/7 problems with right floats that I'm totally overwhelmed and can't see the solution.
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
* html .buggybox {height: 1%;}
(imgposr is not a css item - it's a selector for some jquery)
It seems like something is setting the width of your 'buggybox' to 1px for some reason - that is the only way I was able to get a result that resembles what you are describing.
If at all possible, could you try to post a more complete bit of code that has the problem in it? Try to make the code as short as possible, removing everything irrelevant. I have the following code setup, which I think does what you want.
When I add a width of 1 px to the .imgr div, I get the same result as in the picture you've supplied (in both Firefox and IE), which is why I suspect that is where your problem is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#parent {
width: 600px;
border: 1px solid black;
}
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
</style>
</head>
<body>
<div id="parent">
<div class="buggybox imgr" id="g0">
<img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed.
</div>
</body>
</html>
Hope this helps!
You need to add position:relative; to the parent element.
You could try the following:
.imgr {
overflow:auto;
}