CSS - Why Doesn't This Div Box Wrap Around My Paragraph And Image?

Thanks for taking the time to read my quesiton.

I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image.

Instead of using float, I've tried display: block; but that didn't help.

What do I need to change so that I can get the text to wrap around the image?

Thanks,

Brad

Image is in textbox1

CSS:
Code:

.textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}

Ok here is the problem I have...
I have 3 DIVS....

DIV 1 is a container the centers the contents
DIV 2 I want to wrap tight around an image
DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left.

Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center.

here is the HTML i have...


<div id="div1" align="center">
<div id="div2">
<img alt="fddsffsd" src="image.jpg"/>
<div class='div3'></div>
</div>


and here is my CSS...

#div2 {position: relative}
.div3 {
position:absolute;
width: 80px; height: 80px;
top: 100px; left:20px;
background-image: url(transparent.png);
}

I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas?

http://www.rhizaowns.com/holly/index.php

I am wanting to display an image as a background. However that isn't working for me. So can someone please help me solve this problem? Thanks in advance.

This is the css code that I am working with:
Code:

body {
	background-image: url(cattle_bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

This is the link for that css code which is the htm file:
Code:

<link href="/images/styles.css" rel="stylesheet" type="text/css" />

Hi!
I have a css file (validated) which contains:
Code:

TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); } 

this works properly with
Opera 7.54, Mozilla, but it doesn't work with MSIE!
Only in MSIE I can't see the background image.

Does anybody knows what may be wrong?

MSIE version: 6.0.2600.0000

HI,

Here is my problem :

I have an image which I want to use as a link. I put it between the <a></a> tags.
I have define a CSS for it :
Code:

a.toto:link { color: #474747;}
a.toto:visited { color: #474747;}
a.toto:hover { color: #00BAFF;}

In IE 6, the image show up with a border of different colour than listed above and when I move the pointer over it, this border doesn't change colour as a text-link does.
In FF, all work pretty well as I wanted.

See example on www.steax.com (hope it's work, my server doesn't feel good these days)

Thx

I got this WP style, and I edited it quite a bit.


Code:

#menu {
	clear: right;
	float: left;
	position: relative;
	padding:0 10px 0 10px;
	margin:0 0 0 34px;
	width: 160px;
	/* border-left: 1px solid #bbaf95;
	border-right: 1px solid #bbaf95; */
	background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}

The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one.

Check it out: http://randomized.us

Thanks in advance.

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue...
Thanx in advance

I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as

Code:

<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...

This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated.

I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy.

When I have:
body {
background: url('resources/assets/background.jpg') no-repeat bottom left;
}

in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results.

Does this just not work from an external css, or am I missing something?

Thanks y'all.

My "sidebar" div isn't appearing, and neither is my paragraph inside my "mainContent" div. I have looked online and proofed it over and over, but can't seem to find the problem. Any help will be appreciated.

CSS:
Code:

/*

Designed by: Derrick Zavarella
Date: 10/19/2010 

Primary Colors:
#ffffff
#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)



*/


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;
}
body{
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
#container{
	width: 960px;
	margin: auto;
}
#header{
	width: 960px;
	height: 135px;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	
}
#header h3, p{
	display: none;
}
#nav{
	width: 960px;
	height: 20px;
	background-color: #1c140d;
}
#nav ul{
	float: left;
	list-style: none;
	margin-top: 3px;
}
#nav ul li{
	display: inline;
	margin-left: 5px;
	
}
#nav ul li a{
	color: #f2e9e1;
	text-decoration: none;
	font-style: italic;
	font-size: 10px;
}
#nav ul li a:hover{
	color: #cbe86b;
}
#mainContent{
	float: right;
	width: 760px;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	
}
#mainContent h2{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	margin-top: 15px;
}
#mainContent p{
	color: #f2e9e1;
}
#sidebar{
	float: left;
	width: 200px;
	background-color: #e7e6e6;
}

HTML:
Code:

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

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="content-type" content=
        "text/html; charset=windows-1250">
        <link rel="stylesheet" href="style.css" type="text/css">

        <title>deBuhrs Seed & Feed</title>
    </head>

    <body>
        <!--container begins here-->

        <div id="container">
            <!--header begins-->

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

                <p>seed&feed</p>
            </div>
            <!--end header-->
            <!--navigation begins-->

            <div id="nav">
                <ul id="menu">
                    <li><a href="index.html">home</a></li>

                    <li><a href="about.html">about</a></li>

                    <li><a href="products.html">products</a></li>

                    <li><a href="staff.html">staff</a></li>

                    <li><a href="contact.html">contact us</a></li>

                    <li><a href="affiliate.html">affiliate</a></li>
                </ul>
            </div>
            <!--navigation ends--><!--mainContent begins-->

            <div id="mainContent">
                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.<br>
                </p>
                
				<hr align="center" width="450" noshade="noshade" color="#e7e6e6">

                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.</p>
            </div>
            <!--end mainContent-->
            <!--sidebar begins-->

            <div id="sidebar">
            	
            </div>
            <!--sidebar ends-->
            <!--footer begins-->

            <div id="footer">
            </div>
            <!--footer ends-->
        </div>
        <!--end container-->
    </body>
</html>

Hey,

i've got a contact form , and to the right of it i want the contact information.

it's showing up in FF, but won't sit next to the form, it's going to the top, and doesn't even show up in IE...it's in the source, but not visible on the page.

Here's the CSS;
Code:

#formbox {
margin:10px 15px;
padding:15px;
border:1px solid #333;
width:40%;
font-size:8pt;
color:white;
}
.inputareas {
width:60%;
border:1px solid white;
background-color:#FBAB2B;
color:#333;
padding:1px;
margin:2px;
}

.submit {
border:1px solid white;
background-color:#FBAB2B;
color:#333;
margin:2px;
}

textarea {
font-size:8pt;
color:#333;
}

/* contact form paragraph */

.contactform {
border:1px solid #333;
width:35%;
font-size:8pt;
color:white;
position:relative;
left:55%;
z-index:20;
}

and the html;
Code:

		  <p class="contactform"> <strong>Jack Rosenberg</strong><br> phone - 734-536-6088<br> 
			fax - 734-943-6039<br> email - jrosen@canamdesign.com<br><br> <strong>Pete 
			Komsic</strong><br> phone - 519-996-4673<br> email - pkomsic@canamdesign.com<br><br> 
			<strong>Scott Stein</strong><br> phone - 519-564-7175<br> email - sstein@canamdesign.com<br>	
		  </p>
		  <div id="formbox"> 
			<p>Please complete the following form, ensuring <b>ALL</b> fields are 
			  complete.</p>
			<!-- DISPLAYS ERRORS IF FORM IS INCOMPLETE -->
			<?php 
					// Check to see if there has been any errors...
					if(!empty($errors)) {
									
					echo '<h3>Sorry there has been the following errors with your form :</h3>';
					// Print the errors 
					echo "<div class=\"reglist\">";
					echo "<ul>"; 
					foreach($errors as $error) { 
					echo "<li>$error</li>"; 
					} 
					echo "</ul>";
					echo "</div>"; 
					}							
			?>
			<!-- DISPLAYS INFO IF FORM IS PROPERLY COMPLETED -->
			<?php 
									
					// We only want to show the form if there has been no sucessful post
					if(isset($post_sucess)) {
			
			?>
			<h3>The following information was sent to us by you:</h3>
			<p><b>Contact Name:</b><br> <?php echo htmlentities ($_POST['name']); ?></p>
			<p><b>Email:</b><br> <?php echo htmlentities ($_POST['email']); ?></p>
			<p><b>Phone Number:</b><br> <?php echo htmlentities ($_POST['Phone']); ?></p>
			<p><b>Inquiry:</b><br> <?php echo htmlentities ($_POST['inquiry']); ?></p>
			<?php
									
					} else { // Else show the form
								
				?>
			<form method="post" name="contactform" action="<?php $_POST['PHP_SELF'];?>">
			  <fieldset>
			  <legend>Name:<br></legend>
			  <input type="text" name="name" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Email:<br></legend>
			  <input type="text" name="email" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Phone Number:<br></legend>
			  <input type="text" name="phone" class="inputareas">
			  </fieldset>
			  <fieldset>
			  <legend>Inquiry:<br></legend>
			  <textarea rows="4" cols="30" class="inputareas" name="inquiry"></textarea>
			  </fieldset>
			  <fieldset>
			  <legend> 
			  <input type="submit" value=".:Submit:." class="submit" name="submit">
			  </legend>
			  </fieldset>
			</form>
			<?php } ?>
		  </div>
		  <!-- CLOSES FORM BOX -->

thanks!

I'm a CSS newbie and this is my very first page that I have to make for a class. I can't figure out how to move my text below/center my headline. Every time it gets close (when I use margins) it jumps right to the bottom.

P.S. If my code seems strange it's because I'm not really sure what I'm doing yet, so if you have any advice/better ways to achieve the same effect, please let me know

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Welcome to Jolie Manor Bed and Breakfast</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
</head>
<body id="body" onload="">
<div id="wrap">
<img src="manor.jpeg" alt="Manor" class="floatleft" />
<h1> Jolie Manor <br />
<span class="smaller">Bed and Breakfast</span></h1>
<p class="blocktext"> Escape to Jolie Manor, a luxury waterfront bed and breakfast on the eastern shore, where the Chesapeake Bay is aglow in warm sunsets, where towering oaks gently kiss the skyline and where you can let your body rest and your mind wander.</p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home Page</a></li>
<li><a href="assignment32.html">Amenities</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Local Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

</body>
</html>


CSS:


body
{
width: 800px;
height: 620px;
background-color: rgb(171,214,212);
}

#wrap
{
width: 100%;
height: 100%;
background-image:url(book2.tif);
background-repeat:no-repeat;
background-position: center;
}

h1
{
color: rgb(69,38,26);
font-family: serif;
margin-right: 150px;
margin-top: 100px;
margin-left: 0px;
float: right;
font-size: 2em;


}

.blocktext

{
margin-left: 10px;
margin-right: 0px;
width: 10em;
float: right;
margin-top: 170px;
margin-bottom: 0px;
}

p

{
color: rgb(69,38,26);
font-family: serif;

}


.floatleft
{
margin-left: 60px;
margin-top: 145px;

}
.smaller {
font-size: .75em;
}

#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
position:fixed; top:5px;

}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: rgb(69,38,26);
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
position:fixed; top:5px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: rgb(69,38,26);
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}