www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do I get a 1/3 and 2/3 split?

  1. #1
    Join Date
    Apr 2005
    Posts
    479

    How do I get a 1/3 and 2/3 split?

    I want to split a row

    The left had div should occupy 1/3 and the right hand side should occupy 2/3

    I've seen how to do it before!!
    My mind's gone blank and I can't think how I need to do

    Can someone do me a favour and tell me how?

    Thanks!


    OM

  2. #2
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    Resources:
    info on boxes and divs, Just in case because there isn't a sample here so I don't want to leave you with gaps.

    Now, because divs are block elements if you want them to show side by side you will want to know about displaying.

    because it seems like you are dealing with width

    scroll down to font size here. I know the context is font here but the three ways to scale are px, %, and em. It applies

    and lastly, info on aligning.
    So, I think % and em would be appropriate here as they are relative values. since the percentage would be a repeating decimal though we will keep it simple and go with em. just be careful because em values are relative to the parent.

    Back to making your divs inline though.... I have been having some difficulties with inline divs so I'm just going to throw it out there that you may want to change the divs to a span element.

    Admittedly, I'm new to this so there are gaps in my knowledge but this makes sense to me. someone else might be able to expand or clarify.

  3. #3
    Join Date
    Apr 2005
    Posts
    479
    Quote Originally Posted by TheBoot View Post
    Resources:


    So, I think % and em would be appropriate here as they are relative values. since the percentage would be a repeating decimal though we will keep it simple and go with em. just be careful because em values are relative to the parent.

    Back to making your divs inline though.... I have been having some difficulties with inline divs so I'm just going to throw it out there that you may want to change the divs to a span element.

    Admittedly, I'm new to this so there are gaps in my knowledge but this makes sense to me. someone else might be able to expand or clarify.
    what am i missing. i don't see any reference in your post that addresses my question. i don't even understand what ur talking about. spam post?

  4. #4
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    hm.. follow the links and do the reading, they have the answers if your trying to do what I think. That being, have a div expand to 1/3 of the screen and a second div go 2/3rds side by side.

    How about you give some references: your code, an active example, even a picture of the goal. cuz I'm thinking the following should work div or span. maybe don't use em unless you get them figured out better than me. I tried em and it didn't work. However, I was able to do this with divs as well just make sure you convert the divs to inline elements {display:inline;}.

    index:
    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <html>
    <head>
    <meta http-equiv="Content-Type" content=:text/html; charset=UTF-8" />
    <title> tester </title>
    <link href="tester.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <span class="one">gawd</span>

    <span class="two">ithurts</span>

    </body>

    </html>
    CSS:
    span.one {width: 33.33&#37;;
    height: 100%;
    background-color: #f51717;
    float: left;}

    span.two {width: 66.66%;
    height: 100%;
    background-color: #1731f5;
    float: right;}
    looks like my w3schools links didn't work :/ sorry
    anyway.... you'll want to know about boxes, divs, spans, inline vs box elements, positioning, dimensions, and size which you can find at the bottom of the styling fonts section of w3schools.
    Last edited by TheBoot; 04-26-2012 at 08:29 PM.

  5. #5
    Join Date
    Apr 2005
    Posts
    479
    ok... ur reply is good
    i did similar to what u sggested
    one thing different though - don't put in height - else the image will look squashed
    leave that out

    many links in ur first post don't work - i just thought u might be a spammer!

    thanks

  6. #6
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    I knew I put an extra o in my name
    anyway, glad you got it sorted out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles