|
CSS - How To Make Multiple Areas Float On Top Of Each Other
Hi
I've got 4 divs that are of the exact same size. I need them to all occupy the same real estate on a page. three of them will always be hidden and only one is visible at a time, this is controled by javascript. My question is what kind of positioning tricks do I have to do in order to make these 4 identical sized divs occupy the same space. I tried relative positioning like this div1{ position:relative; top:0; left:0; height:200px;} div2{ position:relative; top:-200; left:0;height:200px;} div3{ position:relative; top:-400; left:0;height:200px;} div4{ position:relative; top:-600; left:0;height:200px;} This only moved the contents of each div up to the desired location, however, it did not move the actual div itself, so I'm left with the reserved 600px high worth of empty space Please help Similar TutorialsI'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help?
Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
<title>Comments on 2005-02-10: February 10, 2005</title>\n
<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
<div id="entry" xml:lang="en-US" lang="en-US">
<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
<p class="dream">I can only remember two things... That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games. One was for a calculator I had only owned in the dream, and it was spectacular!
</p>
<p class="normal">I brought my "newphonium" to school today.</p>
<p class="normal">We had a pretty normal session in Jazz. <em class="entry">Someone actually got a trombone solo.</em></p>
<p class="normal">Our teacher was back. The entire first half of the period going over our homework. <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em> Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>
<p class="happy">We didn't do much in Japanese. All we really did was read Katakana and finish our puzzle. <em class="entry">A few of us found new words.</em> I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>. During resource, I looked over this book with a couple of friends of mine and their friend. <em class="entry">It was so funny, too!</em></p>
<p class="normal">In Health, we continued our lecture on alcohol. <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
<p class="happy"><span class="normal">Class started off with a lock-down. <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English. <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>
<p class="sad">Before actually eating, I wandered a bit. <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
<p class="normal">We continued on proofs. <em class="entry">It took a bit of effort to do.</em> <span class="happy">Still, we finished the investigation.</span></p>
<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span> Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
<p class="happy">I got a ride home</p>
<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
<p class="happy">Once done with my homework, I took a two-hour nap.</p>
<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>. Also, I remember psychically communicating with my section from Band. <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span> Also, my old friend, who is a freshman now, was mentioned.</p>
<p class="happy">The dream gave me the idea to call him up. <em class="entry">Apparently, the call woke him up.</em> We talked about how our lives were going, along with school. <em class="entry">Apparently, the school banned people from using their calculators. How could they!? He also told me that some kids were goofing around during Breakout library time.</em> We scheduled a time to meet and talk about some more things. <em class="entry">I could show him Linux.</em></p>
<p class="happy"><strong class="entry">I fixed the comments system!!</strong> <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
<div class="right">
<img src="comments_files/right_main_bar.png" alt="right_side" />
</div>
<div class="left">
<img src="comments_files/left_main_bar.png" alt="left_side" />
</div>
<div class="center">
Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
<br />
Name: <input type="textarea" name="name" class="lower" />
E-mail: <input type="textarea" name="e-mail" class="lower" />
</div>
<div class="comment">
<input type="textarea" name="comment" class="text" />
<input type="submit" value="Post!" class="click" />
</div>
</form>
</body>
</html>
CSS: Code: h2 {
text-align:center;
font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
color:rgb(0,150,150);
}
h3 {
text-align:center;
font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
color:rgb(0,0,150);
}
form#main {
display:block;
}
form#main div.left {
float:left;
background-color:rgb(255,255,255);
}
form#main div.right {
float:right;
background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
height:60px;
}
form#main div.center {
background-color:rgb(0,0,0);
background:url(comments_files/center_main_bar.png);
font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
color:rgb(255,255,255);
padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 10% 2px 0;
}
form#main div.center input.lower {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 8% 2px 0;
}
form#main div.comment {
width:95%;
border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
width:90%;
margin:5px 5% 5px 5%;
height:100px;
}
form#main div.comment input.click {
width:25%;
margin:5px 37.5% 5px 37.5%;
}
body p {
text-align:justify;
font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
color:rgb(150,0,0);
}
a {
color:rgb(0,100,0);
text-align:left;
}
a:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
a#title {
color:rgb(0,100,0);
text-decoration:none;
margin-left 25%;
text-align:left;
}
a#title:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment a.mail {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,100,0);
text-decoration:none;
text-align:left;
}
div.comment a.mail:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment span.mail {
margin-left 25%;
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,0,150);
text-align:left;
}
div.comment {
border-bottom:2px dotted rgb(0,0,255);
margin:1.5em;
}
div.comment p {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
display:block;
}
/* ENTRY */
div#entry {
border:4px double rgb(0,0,0);
padding:0.25em;
margin:0.5em;
min-height:79em;
}
div#entry p {
font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
text-indent:2em;
text-align:justify;
}
div#entry p.dream {
font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
color:rgb(150,150,0);
text-indent:2em;
text-align:justify;
}
em.entry {
font-style:italic;
}
strong.entry {
font-weight:bold;
}
span.uentry {
text-decoration:underline;
}
span.hider {
color:rgb(255,255,255);
}
div.story {
border-left:2px solid rgb(0,0,0);
border-top:2px solid rgb(0,0,00;
}
div.story div.title {
border-bottom:1px solid rgb(128,128,128);
border-right:1px solid rgb(128,128,128);
font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
width:50%;
text-align:center;
}
div.story div.storybody {
padding:0.25em;
}
span.happy, p.happy {
color:rgb(0,100,0);
}
span.sad, p.sad {
color:rgb(0,0,100);
}
span.normal, p.normal {
color:rgb(100,0,0);
}
img.center {
margin:0.25em auto;
}
img.right {
float:right;
margin:0.25em;
}
img.left {
float:left;
margin:0.25em;
}
I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. How do I make multiple tabs in CSS? I want tabs with rounded corners. So far I can only get 1 tab. What do I do to make more? subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed. is this possible ? Code:
<style type="text/css">
@media all {
.page-break { display: none; }
}
@media print
{
.page-break { display: block; page-break-befo always; }
}
@media print {
div.screenOnly { display: none; }
}
@media print {
div.noborder { border-width: 0px; border-style: none; }
}
</style>
<div class="screenOnly">
this shows on the screen
</div>
<div>this is printed</div>
Ok, I've read over and over my CSS and everything seems perfect. In my HTML editor, the CSS is working, but when it gets the the internet, the content goes berserk. Here are the parts of the code that are not responding: CSS #content { width:610px; margin-left:0px; position:absolute; left:128px; top:156px; padding:25px; height: 838px; } HTML <div id="content"> (too long for post, please veiw source at website) </div> And the link to the website I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page: http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up. Here's the basics of the code: Code: <div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
"See how this and other programs work at" & _
vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>
Here's the style sheet: Code: .code {
text-align: center;
margin: 15px;
}
.codeblock {
text-align: left;
background: #fff;
border: 1px;
border-style: inset;
width: 99%;
height: auto;
overflow: auto;
}
Any help would be appreciated. Thanks. Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. Hey all, I'm wanting to create something like this: HEADER TITLE ___________________ TEXT HERE + - _______________________________ TEX HERE + - _______________________________ TEX HERE + - Ignore the underscores. Now I'm trying this code: Code: <div> <h2 style="display:inline;">HEADER TITLE</h2> <div style="float:right; padding:0; margin:0;"> TEXT HERE + - <br /> etc.. </div> </div> But no matter what I try the 'TEXT HERE' does not appear on the same inline and the floated div appears one line down like so: HEADER TITLE _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - Any suggestions on how to correct this? Thanks Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent. Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg And here's the code for that part: Code: <p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p> <p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p> <p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means "Pink House" and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p> <p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p> <h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2> <p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p> <p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p> The CSS for floatright is: Code:
.floatright {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF. Anybody has any clue on what could cause this? I am trying to put a float to the right side of a layer and then have it go over the right side of the layer. But when I do this the part that is moved over is not visible in IE. I have included an example to make it easier to explain. The green layer should be partially outside the blue layer by 100px. I would appreciate any help getting this done. Thanks Code:
<style type="text/css">
.main
{
position: relative;
top: 100px;
width: 700px;
background-color: #5577cc;
height: 500px;
}
.floatright{
margin-right: -100px;
float: right;
width: 300px;
height: 300px;
background-color:#339900;
}
</style>
</head>
<body>
<div class = "main">
Main
<div class = "floatright">
Float
</div>
</div>
</body>
Thanks for taking the time to read my question. If I use float: none; in my css the result in IE is perfect. However in Firefox it doesn't work. Is there a workaround for this? see "Past Pierced Shows" bottom left corner of page in IE the images and text line up, in Firefox, they are one under another. www.pierced.ca/pierced-events.htm Thanks for the help, Brad Basically, following link: www.projectfinalfantasy.com Works fine in FF but IE, it piles the divs under eachother, whether the float tag is applied or not. Any help would be greatly appreciated. Cheers, Joe. My home page at mypricesavings.com I would like to have the twitter banner under the headline to be in its own div. if you look at my style.css I have this code Code:
#twitter {
width:590px;
float:left;
background:#fff;
padding:10px;
font-size:1.05em;
line-height:1.5em;
margin: 10px 0;
}
Which in fact does what I need it to do when I then add the div to the index.php however, the store deals and matchups which is the featured div no longer floats to the right of the headline, it will drop all the way down and float next to the twitter. I do not understand how CSS exactly works and would like to know how to make the twitter be the way I would like it and have the featured work corectly too. thank you in advance for helping Derrick |
|||||||