The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help with "float" in CSS
ChrnoLove
post Apr 1 2010, 01:43 AM
Post #1





Group: Members
Posts: 4
Joined: 1-April 10
Member No.: 11,547
Hi all, im Chrno
I have a problem with using float
I have a simple page using div with float like this Attached File  Untitled_1.html ( 1.15k ) Number of downloads: 560


Here is the code

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #bd{width:1260px;margin:0 auto;}
    .item{ height:190px; width:190px; margin:10px;background-color:#C0C; z-index:999;position:relative;}
    .bigitem{ height:400px; width:400px; margin:10px;background-color:#C93; z-index:2;}
    .floatleft{float:left;}
    .floatright{float:right;}
</style>
</head>
<body>
<div id="bd">
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="bigitem floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="bigitem floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
    <div class="item floatleft"></div>
</div>
</body>
</html>


Can any1 give idea how to fill all the blank area?
Thanks in advance
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 1 2010, 03:57 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Which one?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ChrnoLove
post Apr 1 2010, 04:15 AM
Post #3





Group: Members
Posts: 4
Joined: 1-April 10
Member No.: 11,547
Plzzz open the html file i attached together in this topic, you'll see, im now planning to make some div with others width and height and i want to sort them, and fill them full in a "bd" div...

I dunno how to explain it but... you'll see in html file, there some blank space and i want to fill them with the divs around
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 1 2010, 04:23 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I did look at the page. I don't know what space you want to get rid of.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ChrnoLove
post Apr 1 2010, 09:05 PM
Post #5





Group: Members
Posts: 4
Joined: 1-April 10
Member No.: 11,547
lol sry 4 my bad E, all i want is to do like this pic

Attached Image

I want to make many cubes with other dimension, and want to sort them like the pic
Is there anyway to do it with CSS??? Or other idea to do it???
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 2 2010, 12:48 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I don't see any way to do it without adding container elements of some sort.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ChrnoLove
post Apr 12 2010, 09:58 PM
Post #7





Group: Members
Posts: 4
Joined: 1-April 10
Member No.: 11,547
Can you make it simply to imagine plzzzz???
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 13 2010, 12:02 AM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I don't think there is a simple way to do it without tables, just using CSS. With that complex a structure, I'd use a table with COLSPAN and ROWSPAN to create the structure.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 04:05 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC