|
CSS - Images Over Divs
I have a series of DIVs on a page , each contains some links and an image. The DIVs seem to expand to accommodate the text but not the images. An example can be seen he http://193.82.99.145/ICISTest2/
How can i get the DIVs to expand to fit the images? HTML: <div class ="boxes"> <div class="boxheader">Are you looking for information?</div> <img src="./images/box_information.gif"> <ul id="navlist"> <li><a href=".\FindInformation\faq.htm">Search for services that can help</a><br> <li><a href=".\FindInformation\sports.htm">Sporting opportunities in Sussex</a><br> <li><a href="http://193.82.99.145/ICISforms/Enquiry/index.htm">Ask us for information</a><br> <li><a href=".\FindInformation\events.htm">Events and activities in your area</a><br> <li><a href=".\FindInformation\newsletter.htm">ICIS newsletter</a><br> <li><a href=".\FindInformation\noticeboard.htm">News items</a></ul> </div> <div class ="boxes"> <div class="boxheader">Are you looking after someone?</div> <img src="./images/box_caring.gif"> <ul id="navlist"> <li><a href=".\ForCarers\index.htm">Help for carers</a><br> <li><a href=".\ForCarers\carerscard.htm">Emergency Alert Card Scheme for carers</a><br> <li><a href=".\ForCarers\wellspring.htm">Newsletter for children with special needs</a><br> <li><a href=".\ForCarers\carersonline.htm">West Sussex carers website</a><br></ul> </div> <div class ="boxes"> <div class="boxheader">How do we help other organisations?</div> <img src="./images/box_organisations.gif"> <ul id="navlist"> <li><a href=".\ForOrganisations\roomhire.htm">Hire of ICIS rooms and equipment</a><br> <li><a href=".\ForOrganisations\index.htm">Other resources for organisations</a><br></ul> </div> </td><td valign="top"> <!-- HOTSPOT BOX --> <div class ="boxes2"> <a href="./FindInformation/newsletter.htm">Summer newsletter now available!</a><br> <a href="http://www.carersweek.org">National Carers Week</a><br> 13-19 June 2005<br> <a href="./AboutSite/whatsnew.htm">What's new on this site</a> </div> <!-- END HOTSPOT BOX --> <div class ="boxes"> <div class="boxheader">About ICIS</div> <ul id="navlist"> <img src="./images/box_about.gif"> <li><a href=".\AboutICIS\contact.htm">Our contact details</a><br> <li><a href=".\AboutICIS\index.htm">What we do</a><br> <li><a href=".\AboutICIS\volunteering.htm">Volunteering at ICIS</a><br> <li><a href=".\AboutICIS\jobs.htm">Jobs at ICIS</a><br> <li><a href=".\AboutICIS\feedback.htm">Tell us what you think of our service</a><br> <li><a href=".\AboutICIS\donations.htm">Make a donation</a><br> </div></ul> <div class ="boxes"> <img src="./images/box_sports.gif" class="floatimgright"> <b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a> </div> <div class ="boxes"> <img src="./images/box_carerscard.gif"> <b><a href=".\ForCarers\carerscard.htm">Carers Emergency Alert Card Scheme</b> </a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\FindInformation\newsletter.htm">ICIS newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\ForCarers\wellspring.htm">Wellspring Newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_question.gif"> <b><a href=".\AboutSite\guide.htm">Do you need help using this website?</b></a> </div> CSS: .boxheader {padding: 2px; background: #ffffff; color: #000000; font-weight:bold; font-size:medium; border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; height: 10px; text-align: left; } .boxes {height: auto; text-align: left; background: #ffffff; padding: 5px; border: 1px solid #663399; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes a {color: #660099; font-weight:bold; text-decoration: none; } .boxes a.active {color: #660099; font-weight:normal; text-decoration: NONE; } .boxes a:hover {color: #666666; font-weight:bold;text-decoration: none; } .boxes a:visited {color: #660099;font-weight:normal;text-decoration: none; } .boxes img{float: right; overflow: auto; height:100%;} .images {padding: 5px; } /* Hotspot Box on home page */ .boxes2 {text-align: left; background: #ffffff; padding: 5px; border: 2px solid #99cc00; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes2 a {color: #99cc00; font-weight:bold; text-decoration: none; } .boxes2 a.active {color: #339900; font-weight:normal; text-decoration: NONE; } .boxes2 a:hover {color: #666666; font-weight:bold;text-decoration: none; } Thanks for your help Similar TutorialsI've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows: #col1r1 { float: left; height: 40%; width: 33%; display: inline; text-align: right; } div#col1r1 div#image { bottom: 66%; left: 60%; color: black; vertical-align: bottom; } div#col1r1 div img.pagegr { width: 60%; } HTML: <div id="col1r1"> <div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div> </div> Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box. I'd really appreciate some help. Thanks in advance. I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Hi, Below is part of my code. Sorry could not upload everything otherwise code would look cumbersome, also could not load images but each image is 234 X 110. What I have is a left column. I firstly want to place a list and then three divs, each div containing an image (with text), that is also a link. I assumed with normal flow the list would appear first and then the divs, one after another. For some reason the divs go to the top of the column and are hidden by the list. I want a normal flow so that the list appears first and then the divs. Any suggestions? I would be grateful for all help. 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>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left
{ width: 17.38em;
padding: 0;
border: 0.125em solid #FF0000;
}
#left.column
{ text-align: justify;
}
#left ul
{ margin: 0;
padding: 0;
}
#left ul li
{ list-style-type: none;
}
#left ul li a, #left ul li a.first_in_list
{ float: left;
display: block;
width: 16em;
margin-left: 0.4em;
padding: 0.28em 0 0.28em 0.25em;
background-color: #FFD700;
border-top: 1px dotted #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000000;
}
#left ul li a:hover
{ text-decoration: none;
}
#left ul li a:hover span
{ text-decoration: underline;
}
#left ul li a.first_in_list
{ width: 16em;
font-size: 1em;
font-weight: bold;
margin-top: 1.8em;
padding: 0.8em 0 0.8em 0.25em;
border-top: none;
}
#leftVLink, #leftSLink, #leftGLink
{ text-align: right;
border: none;
margin: 0.3em 0 0 1em;
}
#leftVLink a:link,#leftSLink a:link,#leftGLink a:link
{ color: #333;
width: 15em;
height: 7em;
display: block;
font-size: 0.95em;
font-family: Verdana;
}
#leftVLink a:hover,#leftSLink a:hover,#leftGLink a:hover
{ color: #000;
text-decoration: underline;
}
#leftVLink
{ min-width: 14em;
background: #fff url(leftVLink1.gif) no-repeat left top;
margin: 1.5em 0 0 1em;
padding: 0.6em 0.5em 0 0;
}
#leftSLink
{ background: #fff url(leftSLink1.gif) no-repeat left top;
padding: 0.6em 0.5em 0 0;
}
#leftGLink
{ background: #fff url(leftGLink1.gif) no-repeat left top;
padding: 1.4em 0.5em 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left" class="column">
<ul>
<li><a class="first_in_list" href="#">
Shopping Directory</a></li>
<li><a href="#">► <span>Latest</span></a></li>
<li><a href="#">► <span>Phone Finder</span></a></li>
<li><a href="#">► <span>iPhone finder</span></a></li>
<li><a href="#">► <span>Deal Finder</span></a></li>
<li><a href="#">► <span>Phones + FREE gifts</span></a></li>
<li><a href="#">► <span>Shop by brand</span></a></li>
<li><a href="#">► <span>Sim free phones</span></a></li>
<li><a href="#">► <span>Coming soon</span></a></li>
<li><a href="#">► <span>New and exclusive</span></a></li>
<li><a href="#">► <span>Trade in</span></a></li>
<li><a href="#">► <span>Compare phones</span></a></li>
<li><a href="#">► <span>Mobile services</span></a></li>
</ul>
<div id="leftVLink"><a href="#" title="voucher codes and offers">Voucher codes<br />and offers</a></div>
<div id="leftGLink"><a href="#" title="gift ideas: be inspired by our gift ideas">Be inspired by<br />our gift ideas</a></div>
<div id="leftSLink"><a href="#" title="safe shopping: advice for safe shopping">Advice for<br />safe shopping</a></div>
</div>
</div>
</body>
</html>
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: 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, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? Hi All, I am trying to get to grips with css positioning and am hitting problems. The code below is my complete page (inc css). I am trying to get the 3 divs - leftbox, middlebox and rightbox to sit alongside each other with 5px gaps and all 3 being vertically aligned 5px below the frontsplash div. 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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#header {
background-color: #80724d;
height: 70px;
width: 790px;
border-bottom: 1px solid #fff;
}
#navbar {
background-color: #d5c8a4;
height: 25px;
width: 790px;
top: 70px;
border-bottom: 1px solid #fff;
}
#frontsplash {
background-color: #fbf8ef;
width: 500px;
margin: 5px;
padding-left: 10px;
padding-bottom: 10px;
}
#frontboxcontainer {
}
#threeboxes {
display: block;
}
#leftbox {
float: left;
background-color: #d5c8a4;
width: 200px;
padding-left: 5px;
}
#middlebox {
top: 0px;
background-color: #d5c8a4;
margin: 210px;
width: 100px;
padding-left: 5px;
}
#rightbox {
top 0px;
background: #d5c8a4;
width: 100px;
margin: 310px;
}
h1 {
font-family: "Times New Roman", serif;
font-size: 24px;
color: #80724d;
padding: 0px;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #80724d;
padding: 0px;
}
p {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #323232;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
float:left;
margin:0;
padding:0;
border-right: 1px solid #fff;
}
#navbar a {
display:block;
padding:0px 10px;
}
</style>
</head>
<body>
<div id="header">
Site Name
</div>
<div id="navbar">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="#">Documentation</a> </li>
<li> <a href="#">Contributing</a> </li>
</ul>
</div>
<div id="frontboxcontainer">
<div id="frontsplash">
<h1>This is the title ... </h1>
<p>This is the introductory text This is the introductory text This is the introductory text
This is the introductory text This is the introductory text This is the introductory text
</p>
</div>
<div id="threeboxes">
<div id="leftbox">
<h2>DEMONSTRATION</h2>
<p> A fully functional demo of the
application is available online
</p>
</div>
<div id="middlebox">
<h2>SUPPORT US</h2>
<p>Why not donate to help keep
the project alive?
</p>
</div>
<div id="rightbox">
<h2>SERVICES</h2>
<p>Professional services available
with the application.
</p>
</div>
</div>
</div>
</body>
</html>
It has all gone pear shaped..... any ideas? Thanks. hi all i am trying to have a container that contains two divs....one sidecase and one main content problem i am having is getting them to aign across the page - that is the main content page is starting where the sidebar ends......any ideas?? if I have a main div that is 790 px wide, how can I have 6 divs floating inline that all are equal in width and take up all the space? I've tried to set the width and there is always a space at the right end. When it looks like I have 5 px leftover and bump up the width by 1 px, adding that to six divs makes the last one drop down. any tutorials or ideas would be great. Thanks, Scott Right now I'm using a table for showing how many people from each state have signed a petition. It looks sort of like this: Code: <table> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">CA</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">1242</a></td> </tr> <tr> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">TX</a></td> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">550</a></td> </tr> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">FL</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">487</a></td> </tr> </table> Should I be using DIVs? Hiya, this is my first time posting here; tia for helping me out with my problem. I am trying to center a 784 wide page, cut up into multiple divs. It's working, but I am getting a problem which I cannot get rid of. I'm using position:relative, and this is making the page scroll as if the images were below each other. They are showing up in the correct spots, but once the page is finished, I end up with another page worth of white space to scroll through (which I do not want.) I hope this explained it correctly. Below is an example of the html and css I am using. Notice the red drops below the final picture then length of the picture itself. Once the entire page is done, it is about 1500px longer than needed. ******************************* HTML ******************************* <html> <head> <link rel="stylesheet" type="text/css" href="new.css"> </head> <body> <div class="begin"> <div class="header_piece_01"><img src="images/picture_01.jpg"></div> <div class="rocket_logo"><img src="images/picture_02.jpg"><br><img src="images/picture_03.jpg"><br><img src="images/picture_04.jpg"></div> </div> </body> </html> ******************************* new.css ******************************* body { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; text-align : justify; line-height : 150%; color : #000000; margin : 0px; border : 0px; padding : 0px; background-color : #FFFFFF; } a { text-decoration : none; } a:hover { text-decoration : none; } .begin { width : 784px; background-color : red; margin-left : auto; margin-right : auto; } .header_piece_01 { width : 31px; height : 118px; } .rocket_logo { position : relative; top : -118px; left : 31px; width : 289px; } Hello I was wondering if any one could help me with a problem with some divs, I would like to create a web page using just css and html which looks like this:- Whay I would like to know is how would I get the divs to keep aliened as in the picture?? Any help would be very appreciated. In IE my center div is even with the rest of the columns. in ff it is not. why? My style sheet does not specify a top-margin to be anything other than default ... http://www.nevertap.com/event.php Apologies for my crude code. I'm attempting to learn css on the fly. My design is looking right on Macs (Firefox, Safari) but the image gallery I've cobbled together is all wrong on pretty much any browser on a PC. Any ideas? (and also - the menu keeps shifting down about 125px more than it should on IE 6.0, any thought there would be equally appreciated!!) many, many thanks. I'm at a roadblock. charlie Please have a look at http://www.root.lamtha2.co.uk/cssproblem/ why is there a gap between #header and #maincontent in both IE and FF how do I resolve? thanks |
|||||||