13 replies [Last post]
freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

seems simple but its been buggin me all morning.. i searched couldn't find anythign so if its a double sorry..

2 divs side by side floated left, the left div is just a title box but it changes width depending on the title name.. the right div takes up the rest of the space to the right of the title div.]
thers alot fo junk in between like rounded corners ill get rid of that and give you the code.

#Home .ContentBlock{
float:left;
width:920px;
clear:both;
padding:17px 0 22px 0;
background: url(../img/home_dotted_09.gif) bottom repeat-x;
position:relative;
}
 
#Home .LeftContent{
float:left;
margin-right:10px;
text-align:center;
padding-top:6px;
letter-spacing:-0.04em;
margin-top:5px;
}
 
#Home .RightContent{
float:right;
width:790px;
}
 
------------------------------------
 
<div class="ContentBlock">
  <div class="LeftContent">
Titles
  </div>
  <div class="RightContent">
lots of content here
  </div>
</div>

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

what is the problem? If it

what is the problem? If it is that the right column isn't floating up beside the left column. Try making them both standalone, i.e. not grouped under the #main id.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

sorry i wasnt clear, the

sorry i wasnt clear, the problem is that the left title content is not shrinking or expanding depending on the content in ie.

Also i am no longer looking to make the right div change in size.. just the left title to depending on whats inside..

thanks alot this is really gettn at me

code update

#Home .ContentBlock{
float:left;
width:920px;
clear:both;
padding:17px 0 22px 0;
background: url(../img/home_dotted_09.gif) bottom repeat-x;
position:relative;
}
 
#Home .LeftContent{
float:left;
margin-right:10px;
text-align:center;
padding-top:6px;
letter-spacing:-0.04em;
margin-top:5px;
max-width:115px;
min-width:80px;
}
#Home .RightContent{
float:right;
width:790px;
}
#Home .Title{
max-width:115px;
min-width:80px;
}
 
----------------------
 
<div class="ContentBlock">
  <div class="LeftContent">
     <div class="Title"></div>
  </div>
<div class="RightContent"></div>
</div>

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Try using the title class on

Try using the title class on a

element instead, i.e.

. That should work.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

well the title isn't just a

well the title isn't just a title in a div, here is the code.. its a rounded corner sort of deal,

<div class="BlueBubbleWrapper">
 <div class="BlueBubbleBg" >
  <div class="TopLeft"></div>
  <div class="TopRight"></div>
  TITLE GOES HERE
  </div>
  <div class="BtmBg">
   <div class="BtmLeft"></div>
   <div class="BtmRight"></div>
  </div>
</div>

so making it a

isnt a option..

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

its meant to be a dynamic

its meant to be a dynamic caption bubble.. like in comics when someone talks.. its jsut mussing the dynamicness in ie

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

If you want the element

If you want the element containing the title to expand according to the character length of the title, then you will need to make it one of the heading tags etc, or a p tag. Not all elements can have their width set consistently with CSS across browswers. There are more elements that can, but only those two are suitable for you.

You could do .TopRight p or .TopRight h2 or whatever, it is the only solution to your problem, it is up to you how you apply it.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

hhmm,, sorry i dont follow..

hhmm,, sorry i dont follow.. your saying turn my top right tag from a div into a p ? tried that unfortunately it dint work.. maybe i am getting you wrong.. thanks a lot for your help bailey

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

No, I am not saying

No, I am not saying that.

You currently have:

<div class="BlueBubbleWrapper">
 <div class="BlueBubbleBg" >
  <div class="TopLeft"></div>
  <div class="TopRight"></div>
  <h3>TITLE GOES HERE</h3>
  </div>
  <div class="BtmBg">
   <div class="BtmLeft"></div>
   <div class="BtmRight"></div>
  </div>
</div>

Then put your min-width and max-width declarations on the h2 element in your CSS code, i.e.

.BlueBubbleBg h3 {
padding:0;
margin:0;
max-width:115px;
min-width:80px;
}

You can also add font-sizes to it if neccesary

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

tried it nothing changed...

tried it nothing changed... the problem only persists in ie.. thanks man, but nothign yet :shrug:

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Which version of IE are u

Which version of IE are u using, and is the problem that the container is being pushed outside the max-width or that it is not the min-width by default?

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

im using ie 7 i havent even

im using ie 7 i havent even tested it in ie 6 yet.. but yea you got it,, its goign right to the max-width and ignoring the min-width

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 9 years 39 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

send me a link to the site

send me a link to the site to see it in action, so I can play around with it

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

freehandp
freehandp's picture
Offline
Regular
Toronto
Last seen: 11 years 9 weeks ago
Toronto
Joined: 2009-05-28
Posts: 12
Points: 0

Here is everything you need.

Here is everything you need. basically look at what is does in firefox.. thats what needs to happen in ie haha.. man if you can solve this you saved my day!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 
.CM-LeftContent{
float:left;
margin-right:10px;
padding-top:6px;
letter-spacing:-0.04em;
margin-top:5px;
max-width:200px;
 
}
.CM-BlueBubbleWrapper{
display:table;
}
.CM-BlueBubbleWrapper .CM-BlueBubbleBg{
float:left;
background:url(../img/blue_bubble_bg.gif) repeat-x;
height:35px;
width:100%;
text-align:center;
background:#0000FF;
}
 
.CM-BlueBubbleWrapper .CM-BlueBubbleBg .CM-TopLeft{
float:left;
background:url(../img/blue_bubble_tl.gif) no-repeat;
height:6px;
width:6px;
background:#0000FF;
}
.CM-BlueBubbleWrapper .CM-BlueBubbleBg .CM-TopRight{
float:right;
background:url(../img/blue_bubble_tr.gif) no-repeat top right;
height:6px;
width:6px;
background:#0000FF;
}
.CM-BlueBubbleWrapper .CM-BtmLeft{
background:url(../img/blue_bubble_btm_l.gif);
width:6px;
height:17px;
float:left;
background:#0000FF;
}
.CM-BlueBubbleWrapper .CM-BtmBg{
background:url(../img/blue_bubble_btm_bg.gif) repeat-x;
height:17px;
clear:both;
background:#0000FF;
}
.CM-BlueBubbleWrapper .CM-BtmRight{
background:url(../img/blue_bubble_btm_r.gif);
width:26px;
height:17px;
float:right;
background:#0000FF;
}
.style1 {color: #FFFFFF}
 
 
 
-->
</style>
</head>
 
<body>
<div style="width:900px; margin:0 auto; float:left;">
	<div class="CM-LeftContent">
		<div class="CM-BlueBubbleWrapper">
			<div class="CM-BlueBubbleBg" >
				<div class="CM-TopLeft"></div>
				<div class="CM-TopRight"></div>
				<span class="style1">Who</span></div>
			<div class="CM-BtmBg">
				<div class="CM-BtmLeft"></div>
				<div class="CM-BtmRight"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>