Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-10-2012, 08:58 PM   PM User | #1
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
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
aaronhockey_09 is offline   Reply With Quote
Old 09-10-2012, 09:04 PM   PM User | #2
Nickriggi
New Coder

 
Join Date: Sep 2012
Location: Ohio, United States
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Nickriggi is an unknown quantity at this point
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.
Nickriggi is offline   Reply With Quote
Old 09-10-2012, 09:06 PM   PM User | #3
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
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.
aaronhockey_09 is offline   Reply With Quote
Old 09-10-2012, 09:09 PM   PM User | #4
Nickriggi
New Coder

 
Join Date: Sep 2012
Location: Ohio, United States
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Nickriggi is an unknown quantity at this point
Post the CSS code please.
Nickriggi is offline   Reply With Quote
Users who have thanked Nickriggi for this post:
aaronhockey_09 (09-10-2012)
Old 09-10-2012, 09:17 PM   PM User | #5
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
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; }
aaronhockey_09 is offline   Reply With Quote
Old 09-10-2012, 10:16 PM   PM User | #6
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
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..
Sammy12 is offline   Reply With Quote
Users who have thanked Sammy12 for this post:
aaronhockey_09 (09-10-2012)
Old 09-10-2012, 10:18 PM   PM User | #7
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
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.
aaronhockey_09 is offline   Reply With Quote
Old 09-10-2012, 10:19 PM   PM User | #8
aaronhockey_09
Regular Coder

 
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
aaronhockey_09 is an unknown quantity at this point
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
aaronhockey_09 is offline   Reply With Quote
Reply

Bookmarks

Tags
div, largest, size, width

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:36 AM.


Advertisement
Log in to turn off these ads.