|
CSS - Fluid Div Problems
I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides.
How can you get the inside div to be of fluid width to the container div with the 10px either side. Thanks. Similar TutorialsI'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions? http://midnighttweaker.50megs.com/test.htm Hello, I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again. I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related: 1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones. 2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal). 3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored. Here is a test html: http://www.bsuto.com/test.html and here is the css: http://www.bsuto.com/fluid.css Thanks! -Brian I'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use. Here's the code I have so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>LAYOUT</title> </head> <body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);"> <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div> </div> </div> </body> </html> I'd love some advice, as I'm very much a hobbyist at this. P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks. Robin Link he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? I am a total newbie to CSS + DIV. I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header." I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser. Here is my CSS, so far for this portion: #header { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 10px; background: url(images/CATScreenMiddle.png); width: 100%; height: 265px; font-family: verdana, arial, helvetica, sans-serif; font-size: 25px; Thanks for any help, in advance. I am useing bon rouge's 3 columns 100%: http://bonrouge.com/3c-hf-fluid.php In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom. Any idea how to fix this? Hello! I'm here after much googling, and I am bashing my head against the wall, so any help is appreciated: Footer and header, fixed size, attached to top and bottom of screen. I want the center div to be a fluid height to sit between the header and footer, and if the content extends beyond that, I want it to scroll within the div, not the page. Here, I'm linking to a picture to explain more clearly: portlandworkshop-dot-com-slash-projects-slash-divs-dot-jpg (it won't let me direct link.. durrr) Nothing I do seems to fix this conundrum... Can ANYONE point me in the right direction? Hello I'm kinda new to css. (PHP programmer by day) and would like some help making something like this. stevenbarre dot com / sample.jpg I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars. The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over. I've done some googleing but haven't been able to find much on 100% height designs. Your help is much appreciated as well as links. Hi guys, need some help for my layout. What I am trying to do is set a div to: When screen width is <1024 x 768 width should be fluid When screen width is >1024 x 768 width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs. Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%. It's been a while since Ive had to produce a layout so I'm a bit rusty and at the moment stuck. I think it should be pretty obvious what I am trying to do from the code, but will briefly explain. ------------------------ |banner | ------------------------ |menu| content | | | | | | | | | | ------------------------ Within the content div, which is fluid and needs to have a min-width of 800px, will be a series of divs (each a 'widget') which either take an entire row to them selves or share a row with another div of same height and a portion of 99% width (leave 1% free to fix ie7 bug). Needs to work in ie6/7 and ff2/3. The issues: Making the content div fluid Ensuring even spacing between widget rows, In FF after a float has been cleared the margin is lost on either the bottom of the floating divs or the top of the cleared div Any help or suggestions would be great. This style of layout is critical for the site and I could do it using tables very easily, however, due to how messy that can become, especially when modifying I would rather a css approach. Code: <!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>Test Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner">title </div> <div id="menu">menu </div> <div id="content"> <div id="messageofday">Message of the Day</div> <div id="weather">Weather</div> <div id="timetable">Timetable</div> <div id="dailybulletin">Daily Bulletin</div> <div id="calendar">Calendar</div> <div id="links">Links</div> </div> </body> </html> Code: /* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* CSS Document */
div
{
border:1px solid red;
}
#banner
{
height:130px;
}
#menu
{
float:left;
width:200px;
}
#content
{
float:left;
min-width:800px;
}
#content div
{
margin:15px 2%;
border:1px solid #999999;
}
#messageofday
{
float:left;
width:75%;
height:50px;
}
#weather
{
float:left;
width:16%;
height:50px;
}
#timetable
{
height:100px;
width:95%;
clear:both;
}
#dailybulletin
{
float:left;
width:55%;
height:120px;
}
#calendar
{
float:left;
width:36%;
height:120px;
}
#links
{
height:100px;
clear:both;
width:95%;
}
Hi all, I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big. What happens in those cases is that the middle column tends to just write itself on top of the right column. Code:
<!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" />
<title>Three columns</title>
<style type="text/css">
body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }
#base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
#main_block { margin: auto; text-align: left; }
#content { padding: 10px; padding-top: 2em; clear: both; }
#container_1, #container_2 { margin: 0; padding: 0; }
.three_column #middle_content_template { margin: 0 210px; }
#left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
#right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
#left_content, #middle_content_template, #right_content_template { padding: 10px; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="content">
<div id="container_1">
<div id="container_2" class="three_column">
<div class="clearfix">
<div id="left_content">
<p>Left box o' content.</p>
</div>
<div id="right_content_template">
<p>Right box o' content.</p>
</div>
<div id="middle_content_template">
<table>
<tr>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right. Additionally, I'd like the gray box to expand with it. Is this possible? I need to create a layout that is 100% width. 2 columns. The right column is 300px and and left column (content) takes up the rest. I need content to be first in the code because of float clearing. Thanks for any help! Hey, I'm creating a 2-column fluid layout and find myself with a problem regarding word wrapping (at least I think that's the problem). For some reason I can't seem to get my content text to behave properly, namely the text gets hidden behind the right column as I decrease the browser-window. The columns are set to 70% (left column) and 30%(right column), with the combined width varying from 760px to 960px. The text I am having problems with is located in the left column, 150px from the far left side. I want this text to stretch from that position up until the right column begins. This have proven quite difficult. The main problem is, I suppose, that the necessery width of the div element that the text is placed within changes as the overall width change. I have tried experimented with specifying the width in percentages, however the correct value for that changes aswell.. So I'm stuck. Hope I made myself clear enough, kind of difficult to explain it to be honest. Does anyone have any idea how I can fix this (without abandoning my overall fluid layout)? Any pointers would be greatly appreciated. Cheers. I am trying to get the background image for #feature-stripe to be fluid. I want it to expand and contract equally with the images just above and below it. The other images are in the #banner & #main-center. I can't seem to get the #feature-stripe to do the same. Also, I am using the #main-left as a placeholder for position. I tried to eliminate it, but things to line back up like I think they should. Side note: I am using XHTML 1.0 Strict DTD. Any help or if someone could point me in the right direction I would appreciate it. CSS Code: Original - CSS Code body { margin: 0px 0px 0px 0px; padding: 0px; background: #431111; } #main-right { width: 20%; float: left; background: url('column_background2.png') repeat; overflow: hidden; padding-bottom: 5px; } #main-right p{ padding: 5px 10px 5px 10px; } #main-center { width: 60%; float: left; margin-left: auto; margin-right: auto; background: #000; padding-bottom: 0px; } #main-center #img { margin-left: 0%; } #main-left { width: 10%; float: left; /*background: #fff; */ padding-bottom: 10px; } #banner { background: #000 url('front-basket_1.png') no-repeat; height: 9.7em; width: 80%; margin-left: auto; margin-right: auto; color: gold; } #banner #right { float:right; width: 25%; height: 9.7em; background: url('column_background2.png') repeat; margin:0px 0px 10px 10px; } #banner #right p{ padding: 5px 10px 5px 10px; } #feature-stripe { background: #5B0E0E url('front-basket_2.png') no-repeat; background-position: 12.7% 0%; height: 20px; }
body {
Code: XHTML <div id="banner"><div id="right"></div></div> <div id="feature-stripe"></div> <div id="main-left"></div> <div id="main-center"><div id="img"><img src="front-basket_3.png" alt="" /></div></div> <div id="main-right">This is the main right</div> Edit: Currently I am getting this to work in Firefox. I will worry about the others later. Therefore, I may be back with more questions later. Hello. I created my own rounded corners fluid site from scratch using CSS and images in the same way you would do it with a table, using the 3x3 format (topleft, topcenter, topright, midleft, midcenter, midright, botleft, botcenter, botright). The problem: The top section works great, but its the middle right section that doesnt justify properly. What you see: For the left and right middle, I have a background repeat on the y-axis. The left background is fine, as well as the middle, but a div inside the middle center is pushing right background to an area below (as shown in this image). http://clients.activemd.net/images/css-problem-screen1.jpg You will notice theres only whitespace on the right, and the background I'm trying to repeat is below it on the right. Heres my CSS: Code: /* CSS Document */ body { margin: 20px auto; /* Had to add margin-top 20px to topleft and top right corners to compensate. */ font-family: Verdana, Geneva, sans-serif; } #main { margin: 20px auto; width: 100%; height: 100%; z-index: 0; } .clear { clear: both; } h1 { margin: 0px 0px 0px 50px; } ul { margin: 0px; padding: 0px; } /* Top Layout */ #top { height: 146px; margin: 0px; padding: 0px; } #top_left { margin-top: 20px; background: url(../images/top-left-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; left: 0px; } #top_right { margin-top: 20px; background: url(../images/top-right-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; right: 0px; } #top_center { margin: 0px 30px; } #top_center_bg { background: url(../images/top-mid-bg.png) repeat-x; width: 100%; height: 30px; } #top_center_bar { background: url(../images/top-mid-bar-bg.png) repeat-x; width: 100%; height: 90px; } /* Middle Layout */ #middle { min-height: 500px; margin: 0px; padding: 0px; } #middle_left { background: url(../images/middle-left-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; left: 0px; } #middle_right { background: url(../images/middle-right-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; right: 0px; } #middle_center { min-height: 100px; } /* Bottom Layout */ #bottom { background: #eee; min-height: 100px; } /* Left box Layout */ #left_box { width: 156px; position: absolute; left: 0px; min-height: 90px; z-index: 100; margin: 0px; padding: 0px; } #left_box_top { background: url(../images/left-box-top.png) no-repeat; width: 156px; height: 30px; position: relative; top: 0px; margin: 0px; padding: 0px; } #left_box_mid { background: url(../images/left-box-mid.png) repeat-y; position: relative; right: 0px; height: 100%; margin: 0px; padding: 0px; } #left_box_bottom { background: url(../images/left-box-bottom.png) no-repeat; width: 156px; height: 30px; position: relative; bottom: 0px; } #left_box_content { color: #FFF; margin-left: 20px; margin-right: 5px; font-size: 0.8em; } #left_box_content a { color: #FFF; } /* Content Area Styling */ #report { height: 100%; min-height: 400px; border: 1px solid #999; margin-left: 160px; margin-right: 30px; } #report_data { float: left; width: 775px; height: 100%; max-height: 400px; overflow: scroll; border: 1px dotted #ccc; margin: 10px; min-height: 100px; } /* Login Info box */ #login_info { background: url(../images/login-bar-bg.png) repeat-x; position: absolute; top: 79px; left: 40px; border: 1px solid #FFF; min-width: 250px; height: 44px; line-height: 44px; color: #FFF; }
and here's the HTML of the site. Code: <body> <div id="main"> <div id="top"> <div id="top_left"></div> <div id="top_center"> <div id="top_center_bg"> <div id="login_info">Logged in as: ricktest <a href="http://clients.activemd.net?action=logout">Log Out</a></div> <div id="top_nav"> <ul class="tabContainer"> <li> <a href="#" class="blue"> <span class="left"></span> <span class="mid">Inquiries</span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Engage <span class="left"></span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Manage <span class="left"></span> <span class="right"></span> </a> </li> </ul> </div> <div id="sub_nav"><a href="javascript:getdata('#middle_center', 'main/index.php');">Home</a> | <a href="javascript:getdata('#middle_center', 'forms/index.php');">Forms</a> </div> </div> <div class="clear"></div><div id="top_center_bar"></div></div> <div id="top_right"></div> </div> <div class="clear"></div> <div id="middle"><!--Here begins the first layer of dynamic content --> <div id="middle_left"></div> <div id="middle_center"></div> <div id="middle_right"></div> </div><!--Here ends the first layer of dynamic content --> <div class="clear"></div> <div id="bottom"> <div id="bottom_left"></div> <div id="bottom_center">Bottom</div> <div id="bottom_right"></div> </div> </div> </body>
The site is dynamic PHP, so I cant just throw a link in here. I hope this is enough information. If anyone can help me with this, I would appreciate it. Thanks. Rick I have found many different ways of doing the 3 column fluid layout on the net... http://css-discuss.incutio.com/?page=ThreeColumnLayouts But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage. I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs. Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end? I thought that floating would work, but i get mixed and undesired output in IE and FF. Thanks to all that contribute. I have an issue with a 2 column CSS layout. Here is my code: Code:
<style>
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:70%;
background:yellow;
}
</style>
<div id="container1">
<div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
<div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem. </p>
<p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
</div>
Which produces this: Basically, I need a set up on the columns so that if there is no content in the left column (col1) col 2 will fill up the missing area. It doesn't work with the above code, specifically because of this part of the CSS Code: #col2 {
float:left;
width:70%;
background:yellow;
}
Which makes col2 move to the left, but retains the 70% width If i change the width to 100% or auto, then the col2 appears below col1 if I have content in col1. If I put no width or float in col2, the content in col2 wraps around col1: Help greatly appreciated A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc? Hi Folks, Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area. What it should look like What it sadly does look like If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position. Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised. Hoping someone can help - I've been at this a week. John |
|||||||