Need assistance spiffing up some divs

schwim · March 20, 2016, 2:19pm

Hi there everyone!

I’m having problems adding a specifications to a page. I’ve divided the specifications into three containers. There are two main things I would like to achieve.

I would like specVal to sit to the right of specName
I would like specDisplay1, 2 and 3 to sit side by side if the display width will support it, otherwise I would like them one below the other.

desktop = 123

mobile =
1
2
3

Could someone help me figure out how to achieve these two things?

Thanks for your time!

Code:

						<div class="specs1">
							<div class="specName">
								<b>Brand:</b>
							</div>
							<div class="specVal">
								1
							</div>
		
							<div class="specName">
								<b>Part Number:</b>
							</div>
							<div class="specVal">
								PXA5034-78573
							</div>
		
							<div class="specName">
								<b>Material:</b>
							</div>
							<div class="specVal">
								Aluminum Alloy
							</div>
		
							<div class="specName">
								<b>Width:</b>
							</div>
							<div class="specVal">
								17
							</div>
		
							<div class="specName">
								<b>Diameter:</b>
							</div>
							<div class="specVal">
								17
							</div>
		
						</div>
	
						<div class="specs2">
							<div class="specName">
								<b>Backspacing:</b>
							</div>
							<div class="specVal">
								4.750
							</div>
		
							<div class="specName">
								<b>Offset:</b>
							</div>
							<div class="specVal">
								0
							</div>
		
							<div class="specName">
								<b>Lug Pattern:</b>
							</div>
							<div class="specVal">
								5x5 in. / 5x127 mm
							</div>
		
							<div class="specName">
								<b>Center Bore:</b>
							</div>
							<div class="specVal">
								71.50
							</div>
		
							<div class="specName">
								<b>Structure:</b>
							</div>
							<div class="specVal">
								One Piece
							</div>
		
						</div>
	
						<div class="specs3">
							<div class="specName">
								<b>Lug Seat:</b>
							</div>
							<div class="specVal">
								Conical seat - 60 degree
							</div>
		
							<div class="specName">
								<b>Centric:</b>
							</div>
							<div class="specVal">
								lug
							</div>
		
							<div class="specName">
								<b>Center Cap:</b>
							</div>
							<div class="specVal">
								1
							</div>
		
						</div>

Page(scroll to the bottom): http://wheeltastic.com/shop/pro-comp/PXA5034-78573

pr0c3ss · March 20, 2016, 2:41pm

Not sure why your using a class for spec1, spec2 and spec3. An ID + class would probably be better…
Like so…

 <div id="spec1" class="spec-container">
 </div>

.spec-container{
display:block;
width:600px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}

.specName{
float:left;
width:50%;
}

.specVal{
float:right;
width:50%;
text-align:left;
padding-left:5px;
}

^ should do 1. You may need to adjust widths depending on what style box you have…

As for 2 you will need to create some media queries
add all lowest width first css to the start of the css file… When you would like things to change to fit different viewports you will add a media query like so

 /*mobile width*/   
 specDisplay1{
 display:block;
 }


   @media only screen and (min-width: 720px) {
     specDisplay1{
     display:inline-block;
     }

   }

schwim · March 20, 2016, 3:00pm

Thank you very much for your help!

First point seems well sorted, thanks!

I’ve added the css for the second issue. I’m somewhat confused about how to implement it however. Should specDisplay1 be a parent div holding them all or should I alter the css to have these entries for parent element(spec1, spec2, spec3)?

Here’s the page with the newly added CSS: http://wheeltastic.com/shop/pro-comp/PXA5034-78573

Thanks!

SamA74 · March 20, 2016, 3:03pm

This is an instance where you should be using html tables, this is tabular data.

Making the three sections display: inline-block should do this. It should not need any query as they should naturally wrap as width decreases.

I would avoid any fixed widths like this, keep it fluid, 600px won’t fit on most mobiles.

schwim · March 20, 2016, 3:10pm

Hi there Sam, thanks for the help!

I tried implementing the suggestion, but I’ve cocked it up as I normally do. I did the following:

EDIT: Sadly, I can’t even figure out how to keep the forum from obliterating my code, so I’m sharing the page again:

http://wheeltastic.com/shop/pro-comp/PXA5034-78573

HTML:

						<div id="specs" class="spec-container">
							<div class="specName">
								<b>Brand:</b>
							</div>
							<div class="specVal">
								1
							</div>
		
							<div class="specName">
								<b>Part Number:</b>
							</div>
							<div class="specVal">
								PXA5034-78573
							</div>
		
							<div class="specName">
								<b>Material:</b>
							</div>
							<div class="specVal">
								Aluminum Alloy
							</div>
		
							<div class="specName">
								<b>Width:</b>
							</div>
							<div class="specVal">
								17
							</div>
		
							<div class="specName">
								<b>Diameter:</b>
							</div>
							<div class="specVal">
								17
							</div>
		
						</div>
	
						<div id="specs" class="spec-container">
							<div class="specName">
								<b>Backspacing:</b>
							</div>
							<div class="specVal">
								4.750
							</div>
		
							<div class="specName">
								<b>Offset:</b>
							</div>
							<div class="specVal">
								0
							</div>
		
							<div class="specName">
								<b>Lug Pattern:</b>
							</div>
							<div class="specVal">
								5x5 in. / 5x127 mm
							</div>
		
							<div class="specName">
								<b>Center Bore:</b>
							</div>
							<div class="specVal">
								71.50
							</div>
		
							<div class="specName">
								<b>Structure:</b>
							</div>
							<div class="specVal">
								One Piece
							</div>
		
						</div>
	
						<div id="specs" class="spec-container">
							<div class="specName">
								<b>Lug Seat:</b>
							</div>
							<div class="specVal">
								Conical seat - 60 degree
							</div>
		
							<div class="specName">
								<b>Centric:</b>
							</div>
							<div class="specVal">
								lug
							</div>
		
							<div class="specName">
								<b>Center Cap:</b>
							</div>
							<div class="specVal">
								1
							</div>
		
						</div>

CSS:

.spec-container{
	display:block;
	/*width:600px;
	margin-left:auto;
	margin-right:auto;*/
	overflow:hidden;
}

#specs { 
    display: inline-block;
}

.specName{
	float:left;
	text-align:right;
	width:50%;
}

.specVal{
	float:right;
	width:50%;
	text-align:left;
	padding-left:5px;
}

SamA74 · March 20, 2016, 3:14pm

Just wait a while.
I’m working on an example using proper mark-up to do away with all those pointless IDs and classes.

schwim · March 20, 2016, 3:15pm

Thank you very much. I’ll not screw anything else up in the interim

TechnoBear · March 20, 2016, 3:15pm

To post blocks of code, you can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code.

(Placing just one backtick at the start and end of the code only works for inline code, such as mentioning a <div> or some other tag.)

SamA74 · March 20, 2016, 3:37pm

This should be more semantic, responsive and light-weight.

You could add a query to make it fold straight to a single column without wrapping if you prefer

@media only screen and (min-width: 920px) {
    .spec tbody { display: inline-block ; }
}

Removing that property from the default css.

SamA74 · March 20, 2016, 3:48pm

This version has the query. You will want to tweak the breakpoint and margins to fit your site, but you should get the idea.
Note there is only one class and no id used in the whole thing.

Edit
Another neat way to do this is with css columns, but unfortunately that does not work with tables in Firefox.

system · June 19, 2016, 10:48pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.