Welcome to Dream.In.Code
Become an Expert!

Join 149,523 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,407 people online right now. Registration is fast and FREE... Join Now!




Horizontal Div's

 
Reply to this topicStart new topic

Horizontal Div's, By Pesentage using css

paata_lom
21 Jun, 2007 - 08:08 AM
Post #1

New D.I.C Head
*

Joined: 21 Jun, 2007
Posts: 4


My Contributions
hi all, sorry for my poor English
I need 4 div's on vertically
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
    <META name="generator" content="HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org">
    <TITLE>This is Title</TITLE>
    <link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>    
    <div id="MainDiv">
        <div>
            <span>fierst</span>            
        </div>
        <div>
            <span>Second</span>            
        </div>
        <div>
            <span>Third</span>            
        </div>
        <div id="divBottom">
            <span>other</span>
        </div>
    </div>
</BODY>
</HTML>

and there is my css class :
CODE

div#MainDiv{
    border:1px solid red;
    float:left;
    height: 300px;
}

div#divBottom{
    background-color:yellow;
    height: 100%;
}

but 4 th div is higher more than main div sad.gif, i tried to set 100 % for divBottom from left area sad.gif is it possible ? bottom div is static, bot above this may be were n capacity of divs sad.gif they are generated dynamically,



any idea will be appreciate
Regards,
Paata

User is offlineProfile CardPM
+Quote Post

Oaty
RE: Horizontal Div's
21 Jun, 2007 - 07:46 PM
Post #2

New D.I.C Head
*

Joined: 10 May, 2007
Posts: 28


My Contributions
paata lom,

If I understand correctly, you want many divs in MainDiv and then the bottomDiv. Like this:

MainDiv
first
second
third
...
other
End of main div

If this is correct, try this CSS
div#MainDiv{
border:1px solid red;
float:left;
}

div#divBottom{
background-color:yellow;
}
with your code, divBottom becomes the size of the unused part of mainDiv.
So if div 1, 2, 3 use 3% of mainDiv then bottomdiv height uses 277% of maindiv's height meaning 100% of the unused part. This mqy be different depending on the browser.

User is offlineProfile CardPM
+Quote Post

paata_lom
RE: Horizontal Div's
21 Jun, 2007 - 09:33 PM
Post #3

New D.I.C Head
*

Joined: 21 Jun, 2007
Posts: 4


My Contributions
Thank you very much smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 08:36PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month