Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts

    Question Make all divs the width of largest div

    Hey guys,
    I have some content.
    On the left it is the title, and on the right is the content / links.
    Each row has this layout.
    How can i make the divs on the left all the same size.

    So if the largest div on the left is 100px.
    All of them are equal to 100px.

    Each item is inside of its own row, so it looks something like hits

    Code:
    <div class="row">
        <div class="left">Title Name - Largest </div>
        <div class="right">Item, Item2, Item3, Item4</div>
    </div>
    
    <div class="row2">
        <div class="left">Title Name </div>
        <div class="right">Item, Item2, Item3, Item4</div>
    </div>
    
    <div class="row3">
        <div class="left">Title Name </div>
        <div class="right">Item, Item2, Item3, Item4</div>
    </div>
    I need the divs "left" to be the same width as the largest one.

    Any help would be greatly appreciated
    Cheers

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Ohio, United States
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    For your CSS, just don't use any "Width: ***;" keep the width attribute out of it, and then it automatically takes the width of it's parent div.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Nickriggi View Post
    For your CSS, just don't use any "Width: ***;" keep the width attribute out of it, and then it automatically takes the width of it's parent div.
    I dont have any width,
    Right now they are all different widths because the content is different in each left div.

  • #4
    New Coder
    Join Date
    Sep 2012
    Location
    Ohio, United States
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post
    Post the CSS code please.

  • Users who have thanked Nickriggi for this post:

    aaronhockey_09 (09-10-2012)

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Nickriggi View Post
    Post the CSS code please.
    .row { clear: both;
    width: 100%;
    float: left;
    margin: 5px 0; }

    .row .left {
    height: 20px;
    padding: 10px 10px; float:left; }

    .row .right { float:left; padding:10px; }

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    I need the divs "left" to be the same width as the largest one.
    That's a <table>.

    You can also use the CSS display: table; and display: table-cell; if you don't like HTML tables.
    http://www.w3schools.com/cssref/pr_class_display.asp

    Tables are highly rebuked today, but if you are making a table, what better tag is there to use than <table>.
    Last edited by Sammy12; 09-10-2012 at 10:21 PM.

  • Users who have thanked Sammy12 for this post:

    aaronhockey_09 (09-10-2012)

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Sammy12 View Post
    That's a <table>.

    You can also use display: table; and display: table-cell;
    http://www.w3schools.com/cssref/pr_class_display.asp
    Yes, but i can't change any of the HTML
    That part is kinda set in stone.

    So i need to do it w/ css or jquery or something.

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by Sammy12 View Post
    That's a <table>.

    You can also use the CSS display: table; and display: table-cell; if you don't like HTML tables.
    http://www.w3schools.com/cssref/pr_class_display.asp
    ill try the display table & table-cell
    If not, i think ill need to use jquery


  •  

    Tags for this Thread

    Posting Permissions

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