14 replies [Last post]
coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

For example the word in div is "rkgjnkqejrnfgqernwflneqrokfnleqwnflkqwenflknwefwenf" without spaces. How do i make div widen in order to include all text? Now it just go through the div and all adjacent divs as well.

PHP.net Opera.com

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 32 weeks 21 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

How to make floating div to widen automaticaly

Search for "clearing floats" Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

How to make floating div to widen automaticaly

Is this not a width thing rather than a clear thing?

Do you have a specific width on the div in question? If so it's not supposer to widen although IE will ignore that rule and probably do what you want. You can try min-width for non IE browsers but I suspect that will not work as it will then make the div as wide as it's container which might not be what you want.

If you have a link to the page in question we might be better placed to assist.

coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

How to make floating div to widen automaticaly

.cart-item {
	height: 26px;
	padding-top: 0.4em;
	margin:0; 
	clear:left;
	position:relative;
}

.cart-item-counter {
	float: left;
	width: 30px;
}
.cart-item-title {
	float: left;
	width: 114px;
}
.cart-item-ref {
	float: right;
	width: 53px;
}
.cart-item-price {
	float: right;
	width: 60px;
}
.cart-item-quantity {
	float: right;
	width: 60px;
}
.cart-item-quantity input {
	border: 1px solid #009eff;
	height: 17px
}
.cart-item-totalprice {
	float: right;
	width: 86px;
}
.cart-item-control {
	float: right;
	width: 62px;
}

<dl>
	<dd>
	<div class="cart-item-counter">&nbsp;</div>
	<div class="cart-item-title">Titre</div>
	<div class="cart-item-control">&nbsp;</div>
	<div class="cart-item-totalprice">Paiement</div>
	<div class="cart-item-totalprice">Paiement</div>
	<div class="cart-item-quantity">Nombre</div>
	<div class="cart-item-price">Prix</div>
	<div class="cart-item-price">Prix</div>
	<div class="cart-item-ref">Ref</div>
	</dd>

	<dd class="cart-item cart-item-color">
	<div class="cart-item-counter">1</div>
	<div class="cart-item-title">Gidelix VX</div>
	<div class="cart-item-control"><a href="javascript:location.href=''" class="submit">Effacer</a></div>				
	<div class="cart-item-totalprice">SFr 5.60</div>
	<div class="cart-item-totalprice">&euro; 7.00</div>
	<div class="cart-item-quantity"><input name="quantity" size="4" value="1" /></div>
	<div class="cart-item-price">SFr 5.6</div>
	<div class="cart-item-price">&euro; 7</div>
	<div class="cart-item-ref">GD XV X2 15</div>
	</dd>
</dl>

PHP.net Opera.com

coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

How to make floating div to widen automaticaly

Just tryinfg to make price list without tables.

PHP.net Opera.com

coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

How to make floating div to widen automaticaly

So nobody can help me?

PHP.net Opera.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How to make floating div to widen automaticaly

Wouldn't it be better to have the word wrap rather than stretch your div? I mean, wouldn't that break your layout? I know there is a CSS attribute for getting long words to break/wrap, but I can't remember what it is.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to make floating div to widen automaticaly

A couple of comments. Why are you avoiding the use of a table here? This is exactly where a table should be used - tabular data.

Your use of the dl is wrong. You have a strong case of divitis. I'm not sure a <dd> can even contain a <div>. If you insist on using a dl, I'd do something along the lines of:

<dl>
   <dt class="cart-item-counter">Item</dt>
     <dd class="cart-item-title">Titre</dd>
     <dd class="cart-item-control">&nbsp;</dd>
     <dd class="cart-item-totalprice">Paiement</dd>
     <dd class="cart-item-totalprice">Paiement</dd>
     <dd class="cart-item-quantity">Nombre</dd>
     <dd class="cart-item-price">Prix</dd>
     <dd class="cart-item-price">Prix</dd>
     <dd class="cart-item-ref">Ref</dd>

   <dt class="cart-item-counter">1</dt>
     <dd class="cart-item-title">Gidelix VX</dd>
     <dd class="cart-item-control"><a href="javascript:location.href=''" class="submit">Effacer</a></dd>
     <dd class="cart-item-totalprice">SFr 5.60</dd>
     <dd class="cart-item-totalprice">&euro; 7.00</dd>
     <dd class="cart-item-quantity"><input name="quantity" size="4" value="1" /></dd>
     <dd class="cart-item-price">SFr 5.6</dd>
     <dd class="cart-item-price">&euro; 7</dd>
     <dd class="cart-item-ref">GD XV X2 15</dd> 
</dl>

Edit: yay! 1000 posts!

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

How to make floating div to widen automaticaly

Tyssen wrote:
Wouldn't it be better to have the word wrap rather than stretch your div? I mean, wouldn't that break your layout? I know there is a CSS attribute for getting long words to break/wrap, but I can't remember what it is.

There is the "word-wrap: break-word;" but hey guess what, it's invalid IE onlt code :roll:

P.S. Woo Wolfcry - keep up the excellent work!

coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

How to make floating div to widen automaticaly

wolfcry911 wrote:
A couple of comments. Why are you avoiding the use of a table here? This is exactly where a table should be used - tabular data.

So why DL was used to create this forum index page? That`s tabular data as well.
And please can anybody tell or give a link to some official document where tables usage (where they should be used) and future described.

PHP.net Opera.com

coviex
coviex's picture
Offline
Regular
Kharkiv, Ukraine
Last seen: 14 years 34 weeks ago
Kharkiv, Ukraine
Timezone: GMT+2
Joined: 2005-09-16
Posts: 36
Points: 0

How to make floating div to widen automaticaly

wolfcry911 wrote:
If you insist on using a dl, I'd do something along the lines of:...

Long words still go through other DD Sad

PHP.net Opera.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to make floating div to widen automaticaly

You'll have to account for the longest word and set that width - of course that will change if the user changes font size. You can overcome the font size increase by using ems (again accounting for the longest word). If you set no width at all, the float will shrink wrap to the longest content - in this case the word. Another possiblilty is to use overflow:hidden; to hide any text outside the float.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

How to make floating div to widen automaticaly

wolfcry911 wrote:
I'm not sure a <dd> can even contain a <div>

Hi

(Just checked if I had posted my 2 pence worth a few days ago, forgot to post it.)

It can and validates.

Trevor
PS Congrats on the millenium

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to make floating div to widen automaticaly

good to know. Wink

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How to make floating div to widen automaticaly

briski wrote:
Tyssen wrote:
Wouldn't it be better to have the word wrap rather than stretch your div? I mean, wouldn't that break your layout? I know there is a CSS attribute for getting long words to break/wrap, but I can't remember what it is.

There is the "word-wrap: break-word;" but hey guess what, it's invalid IE onlt code :roll:
Probably why I couldn't find it again last night when I went looking for it. I'd seen it mentioned on another forum which is often a source of misinformation, so I shoulda known better. :oops:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference