Learn VBA & Macros in 1 Week!

CSS - Text Floating Problem

Full Excel VBA Course - Beginner to Expert

Text Floating Problem	View Content

Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm
The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this?

Thanks,
Geoff

Code:

<html>
	<head>
		<style type="text/css">
			.image
			{
				border			: solid black 1px;
				margin			: 5px;
				padding			: 5px;
				float			: left;
			}
			.description
			{
			}
		</style>
	</head>
	<div class="image">
		<img src="" width="100" height="100"/>
	</div>
	<div class="description">
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
		This should be to the right of the image and should not flow underneath the image.
	</div>
</html>

Full Excel VBA Course - Beginner to Expert

Problem With Floating Text To Right

Similar Tutorials

View Content

Floating Divs/text Wrapping Problem

Similar Tutorials

View Content

I am a bit lost as to how to accomplish the following:

I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one.

I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div.

Any ideas?

Text Outside Of Floating Div

Similar Tutorials

View Content

I have a 4 column div layout using floats.

When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div?

Here's an example of my code:

CSS:
Code:

div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}

div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
        
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}

div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}

div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}

HTML:
Code:

<div id="middle" class="minmax">
<!-- Main Articles -->
<div id="featured"  class="vsize">
<h1>Featured Header</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!-- Short Articles -->
<div id="snippets" class="vsize">
<h1>Snippets Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<!--  Search, other tools, event calendar -->
<div id="tools" class="vsize">Tools</div>
<!-- Ads -->
<div id="ads"  class="vsize">Ads</div>
</div>

Text Disappears Behind News Floating Box?

Similar Tutorials

View Content

Hi Guys,

Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want.

The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar!

Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php

PHP Code:
html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(bgs.gif);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: Times, "Times New Roman", serif;
}
#wrap {
background-image:url(bg.gif);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}
#header {
background-image:url(label2.gif);
background-position:right;
background-repeat:no-repeat;
background-color: #000066;
border-bottom: 2px #ffffff solid;
color: #ffffff;
margin:0; padding:0;
height:80px;
}
p {margin:5px; padding:0;}
h1 {
position:relative;
line-height:80px;
margin:0; padding-left:20px;
}
#left {
float:left;
width:150px;
color: #ffffff;
text-align:center;
background-color: #000066;
}
#main {
position:relative;
margin-left:200px;
}
#right {
float:right;
width:10px;
text-align:center;
color: #ffffff;
background-color: #000066;
}
#content {
padding:5px;
margin-right:200px;
text-align:left;
}
#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000066;
border-top: 2px #ffffff solid;
margin:0; padding:0;
margin-top:-0px;
color: #ffffff;
text-align:center;
}
div#newsbar {padding: 1%;
text-align: center;
height:150px;
background-color: #000066;
color: #ffffff;
margin-left: +150px;
margin-right: +10px;
margin-top: -190px;
border: 2px #ffffff solid;
width: auto;}

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

There must be a reason why it works like it does, but i don't know!!

Charlie

Menu Floating Right Pushes Main Text Down In Ie7

Similar Tutorials

View Content

See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png
- having trouble to get it showing the image with the bbcodes :S

As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down.

Anyone has any idea how to fix this?

Style Sheets
Code:

body
{
text-align: center;
  background: #800000;
  color: #fff;
}
* {
  padding: 0;
  margin: 0;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}

#spacer {
  height: 50px;
}

#header {
  height: 100px;
  width: 100%;
  background: url(ctfiles/logo.png) no-repeat top center #000;
}

#container {
  background: #fff;
  padding: 10px;
}

#main {
  background: #000;
  color: #fff;
  width: 700px;
}

.sidebar {
  float: right;
  text-align: right;
  background: #000;
  color: #fff;
  width: 30%;
  padding-left: 8px
  padding-right: 12px
}

.content { 
  color: #fff;
  background: #000;
  width: 70%;
  margin-left: 2px;
  margin-right: 2px
}

HTML/Template/PHP w/e
Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one.
PHP 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>[(site_name)] | [*pagetitle*]</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" />
        <base href="[(site_url)]" />



        </head>
<body>

<div id="page">

<div id="spacer">
</div>

<div id="container">

<div id="header">
</div>

<div id="main">
<div class="sidebar">
[[Wayfinder? &startId=`0`]]
</div>
<div class="content">
            <h4>[*longtitle*]</h4>
                [*#content*]
</div>
</div>

<div id="footer">
        [(site_name)] is powered by
        <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a>
        <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br />
MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^].
</div>

</div>
</div>

</body>
</html>

Floating Text Around A Centered Div - Boss Wants Me To Do The Impossible

Similar Tutorials

View Content

Hi,

Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea???

Cheers,

Wrapping Text With Multiple Floating Left And Right Divs

Similar Tutorials

View Content

Trying to achieve this:

I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far:

http://gatehouse.graffetto.com/floating_divs.html

Code:

Code:

<html>
<head>

<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>

</head>
<body>

<div class="mainDiv">
       <div class="image">test</div>
       <div class="rightAd">test</div>
       <div class="textDiv">
              Text content
       </div>
</div>

</body>
</html>

I know this is simple i just can't figure it out for some reason.. thanks for any help.

Styling A Line To Have Centered Text And An Image Floating On The Left/right

Similar Tutorials

View Content

Dd Ie Floating Problem

Similar Tutorials

View Content

Hi..

I have a problem with ie rendering floaring dd's. What happens is the dd stay next to each other even if i had cleared it. It works fine in FF. Can anyone share some light?

... here is the code...

Code:

<dl>
                                <dt>Email:</dt>
                                <dd><input type="text" /></dd>
                                
                                <dt>State:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                                
                                <dt>Year of Birth:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                            </dl>

and the css:

Code:

dl{
}

dl dt{
	clear:both;
	width:80px;
	text-align:right;
	margin:10px 0;
}
dl dd{
	margin:8px 0 0 5px;
}

dl dt,dl dd{
	float:left;
}

thank you in advance

Floating Problem

Similar Tutorials

View Content

Please view the attached image. I want it as;
left arrow - gallery - right content

all on same line.

css
Code:

#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }      
#content #gallery  a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery  a:active { border: none; outline: none; }

html
Code:

    		<div id="gallery">
                <a href="#" class="galleryprev">&nbsp;</a>
                <div class="list">
                    <ul>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
                    </ul>
                </div>
                <a href="#" class="gallerynext">&nbsp;</a>
          </div>

Div Floating Problem

Similar Tutorials

View Content

Hi

I use DIV to display image thumbnails in a row from php loop.

for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left,

here is my code till now,

PHP Code:
echo "<div style='
    text-align: center;
    border: solid 1px #993333;
    padding: 1px;
    margin: 2px;
    float: left;
    margin-left: 6%;
    '>";

echo "<div style='
     text-align: center;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;'>
     <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a>
     </div></div>";

Problem With Floating In Ie7

Similar Tutorials

View Content

Hi All

I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine.

When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be.

Is there a work-a-round and/or hack for this?

Cheers!

Russ

Floating Box Problem

Similar Tutorials

View Content

http://tonglebeak.com

View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them.

How can I get IE to render this the same as FF?

Problem With Floating

Similar Tutorials

View Content

I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening.

.hint {
float:right;
display: none;
position:absolute;
width: 150px;
border: 1px solid #aaaaaa;
background: #d7d7d7;
}
www.pearl.ru/isdunyasi/signup.asp

Floating Problem With Ie 5.0 And 6.0

Similar Tutorials

View Content

The image below is how I want my website to look (div-wise, that is). It looks like this on all platforms and on all browsers except IE 5.0 and 6.0:

IE 5.0 and 6.0 render the following:

I have included my html + css code below. I have tried to make #sidenav float:left instead of float:right. This makes no difference for browsers but IE 5.0 and 6.0, which then again render the page wrong. Also decreasing the width of #sidenav (i.e. to 20px) doesn't help; the result is the same.

Could somebody please help me fixing this There must be at least one css guru out there today All help is greatly appreciated!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
}
    
#main {
  background-color: red;
  text-align: center;
}

  #wrapper {
    text-align: left; 
    margin: 0 auto; 
    width: 300px; 
  } 

    #content {
      background: yellow; 
      width: 200px; 
      float: left; 
      margin-left:50px;
    }
  
      #logo {
        background-color: lime;
      }
  
      #mainnav {
        background-color: pink;
      }

      #subnav {
        background-color: navy;
      }

      #text {
        background-color: orange;
      }

    #sidenav {
      background-color: blue;
      width: 50px;
      float: right;
      padding-top: 50px;
    }
      
  #footery {
    clear:both;
    background-color: #fff;
  }
  
    #footer {
      background-color: pink;
      margin: 0 auto; 
      width: 200px;
    }

#logo, #mainnav, #subnav, #footer {
  min-height: 30px;
}    
    </style>
</head>

<body>
  <div id="main">
    <div id="wrapper">
      <div id="content">
        <div id="logo"><br><br></div>
        <div id="mainnav"><br><br></div>
        <div id="subnav"><br><br></div>
        <div id="text"><br><br><br></div>
      </div>
      <div id="sidenav">text</div>
    </div>
    <div id="footery">
      <div id="footer"><br><br></div>
    </div>
  </div>
</body>
</html>

Floating Problem Only With Firefox

Similar Tutorials

View Content

I dont know what I am doing wrong. I checked one of the online templates and actually I got the idea from an online template. I want to float columnist image to left, short text to right with these codes. It appears fine at ie but in firefox text appears line under image. Here; http://www.pearl.ru/isdunyasi

#maincontentcolumns {
float:left;
margin-right:2px;
width:598px;
height:150px;
background:#FFFFFF url(images/innerheadline_bg.gif) top no-repeat;
}
#maincontentcolumns h1 {
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
#maincontentcolumns .c {
float:left;
margin:0px 2px 0px 2px;
width:292px;
height:80px;
}
#maincontentcolumns .c img {
float:left;
position:relative;
height:80px;
width:80px;
padding:2px;
}
#maincontentcolumns .c p {
float:right;
padding:2px;
margin:0;
font-size:14px;
}

PS: This is my last working with ie not with firefox message. I started testing with firefox. When it works with firefox it surely works with ie.

Problem With Floating Columns Under Each Other.

Similar Tutorials

View Content

Okay, so here's my code. I need to know how to make the div's go under each other, without neither being side by side, or oddly spaced. Oh, and only Chrome and Safari honor the top: 20%;. I tried putting in a link, but I'm a new user so can't put it in. D: I would like the div's to go below each other, but not sure how to do it. Also, if possible, does anyone know how I could set a determined height? I seem to have the width down.

By the way, I'm sort of new to coding, so feel free to school me on how to code it better.

Here's the code that I'm using, if you can see my error from the code alone.

Code:

<!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/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
      <title>Test</title>  
      <style type="text/css" media="all">
			.navbodyleft { 
  				color: #ffffff; 
  				background-color: black;
  				font-family:arial; 
  				font-size: 20px;
				position: relative;	
				top:0%;
				float: right;
				width: 10%;	
			}

			.hai { 
  				color: #cc0000; 
  				background-color: yellow;
  				font-family:arial; 
  				font-size: 20px;
				position: relative;
				top: 10%;
				float: right;
				width: 10%;	
			}

</style>
</head><body>
<div class="hai">hai</div>

<div class="navbodyleft">hi</center></div>
</body></html>

So, in short, I would like to know: how to make the floating divs go under each other how to set a determined height for the floating divs how to make all browsers acknowledge my preset distance from top
Thanks guys.

Floating Problem, 2 Columns

Similar Tutorials

View Content

My problem is, review section is completely jumbled. I'v attached screen shots of the correct layout taken from another website.

Any suggestions would be appreciated.

http://www.refinethetaste.com/html/default.asp?Section=product&PRODUCTID=14#fragment-3

Code:


#product .raterprofile	{ float:left; width:200px;}
#product .raterprofile .intprofile	{ font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}
#product .ratercontent	{ float:left; width:325px; border-left:1px dotted #ccc;}
#product .ratercontent .intrating	{ font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}

Problem With Floating Image To Right

Similar Tutorials

View Content

I want "alternate views" text and thumbimage stand on the same line. I dont understand why the image moves a line below. Please advise.

PHP Code:
html:
#product .productimage .thumb {  float:left; width: 250px; border-bottom:1px dotted #ece7d1; }
#product img#thumbimage { float:right;    width: 16px; height: 16px; border: 0px; }

css:
            <div class="thumb">
                alternate views : <img src="http://www.refinethetaste.com/html/THEMES/default/images/pictures.png" id="thumbimage" />
            </div>

Problem Floating A List To The Right With Ie6

Similar Tutorials

View Content

Hi there,

I'm having a problem floating an unordered list to the right with IE6. With Firefox it works without problems as usual.

I have uploaded on www.emotiona.com/test the failing code.

I got it properly displayed when doing the following:

- Set the ul tag to float: right;
- Set the li and a tags to float: left;

Someone knows a rational explanation to the way IE6 behaves? There's a better way to achieve the same result?

Besides with the tabs turn from blue to orange in firefox without problems, but with IE6 only the background defined for the tag "a" changes when the mouse is over. I haven't solved this issue yet.

Thanks,
Caste