ul's or Tables, side-by-side

comport9 · 11-14-2012, 04:36 PM

Sorry for the title, what I'm trying to do is have several unordered lists, with maybe 10 - 15 items within them, span across the users screen side-by-side. I want the number of columns across to change based on the users screen size, with those "pushed off" to be placed underneath the lists.

So, imagine I have 3 unordered lists. If the users screen is wide enough I want them displayed as such:

Title 1 Title 2 Title 3
stuff stuff stuff

However, if the users screen isn't wide enough, I want the third column to be displayed underneath the first:

Title 1 Title 2
stuff stuff

Title 3
stuff

I'm eventually going to be having these tables/columns/unordered list (whatever) generated dynamically with PHP as the number required will be user dependent. But I first need to know the proper HTML and/or CSS to generate the code.

Any help is much appreciated!

niralsoni · 11-14-2012, 04:54 PM

Try this...

Code:

<style type="text/css">
	.containerDiv .contentDiv {
		float: left;
		width: 200px;
		display: block;
		border: 1px solid red;
	}
</style>

<div class="containerDiv">
	<div class="contentDiv">
		<span>content 1</span>
		<ul>
			<li>stuff 1</li>
			<li>stuff 2</li>
		</ul>
	</div>

	<div class="contentDiv">
		<span>content 2</span>
		<ul>
			<li>stuff 3</li>
			<li>stuff 4</li>
		</ul>
	</div>

	<div class="contentDiv">
		<span>content 3</span>
		<ul>
			<li>stuff 5</li>
			<li>stuff 6</li>
		</ul>
	</div>

	<div class="contentDiv">
		<span>content 4</span>
		<ul>
			<li>stuff 7</li>
			<li>stuff 8</li>
		</ul>
	</div>
</div>

Hope this may help you out...

Regards,
Niral Soni

Excavator · 11-14-2012, 05:09 PM

Hello comport9,
This really looks like a good place to use Definition List.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 80%;
	min-width: 210px;
	margin: 0 auto;
	background: #999;
}
dl {
	width: 200px;
	margin: 5px;
	float: left;
	border: 1px #333 solid;
}
</style>
</head>
<body>
    <div id="container">
    	<dl>
        	<dt>Title 1</dt>
            	<dd>stuff 1</dd>
                <dd>stuff 2</dd>
        </dl>
        <dl>
        	<dt>Title 2</dt>
            	<dd>stuff 3</dd>
                <dd>stuff 4</dd>
        </dl>
        <dl>
        	<dt>Title 3</dt>
            	<dd>stuff 5</dd>
                <dd>stuff 6</dd>
        </dl>
        <dl>
        	<dt>Title 4</dt>
            	<dd>stuff 7</dd>
                <dd>stuff 8</dd>
        </dl>
    <!--end container--></div>
</body>
</html>

comport9 · 11-14-2012, 05:19 PM

Thanks. That actually worked perfectly. Only one minor problem is if a list is shorter, as in, fewer li elements, the column moves underneath that one instead... this won't be as issue for me as I'll make sure all elements have the same number. Can I specify a height to fix the problem? (Yes it does)

As for definition lists, why should I use them in place of ul's? Thanks!

Follow up question: how do you center the columns? (Not the text inside...)

comport9 · 11-14-2012, 05:59 PM

Sorry to post again, but I'm having difficulties getting the columns to be centered horizontally. When I do get them centered, then the far right column doesn't move when the screen is resized. (Well, it does eventually move, but not the moment the screen is smaller than the column, so what happens is some of the column is off screen...)

Here's current code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="test2.css" />
</head>
<title>
test
</title>
<body>
	<div id='news_wrapper'>
		<ul class='news_ul'>Title One
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
		</ul>
		<ul class='news_ul'>Title Two
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
		</ul>
		<ul class='news_ul'>Title Three
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
		</ul>
		<ul class='news_ul'>Title Four
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
		</ul>
		<ul class='news_ul'>Title Five
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
			<li class='news_link'>One</li>
		</ul>
	</div>
</body>
</html>

And style:

Code:

.news_ul {
	float: left;
	width: 400px;
	height: 250px;
	border: 1px solid red;
	}
	
#news_wrapper {
	}

Yes, news_wrapper is empty because nothing I put in it really works. But I'm assuming I have to put something in there...

Excavator · 11-14-2012, 06:05 PM

A dl is handy because it includes a built-in title element that suits your needs. Saves putting a class on a ul to style seperately.

Your snippet you've posted is invalid, several errors there. See the links about validation in my signature line.

comport9 · 11-14-2012, 06:29 PM

Not interested in validation ATM. Just testing out concepts and processes (This isn't the HTML that will be on my site...). Are you saying I can't center the div because my html isn't properly validated?

felgall · 11-14-2012, 06:44 PM

Invalid HTML can easily stop the CSS from working properly. When the CSS doesn't work as expected the most obvious thing to check first is to make sure that the HTML is valid.

Excavator · 11-14-2012, 06:59 PM

Quote:

Originally Posted by comport9

Not interested in validation ATM. Just testing out concepts and processes (This isn't the HTML that will be on my site...). Are you saying I can't center the div because my html isn't properly validated?

No, I'm saying your ul lists are not formed correctly.
Your div is not centered because you haven't told it to be.

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

comport9 · 11-14-2012, 08:09 PM

Thanks. I'll work on that right now. I've set my div's margin's to auto before, however, I can't set the width to 100% and have everything aligned. I have to specify an exact width. Which kinda defeats the purpose of what I'm trying to do.

My doctype should be valid for HTML5 no? Or is it because I haven't properly validated my code? I'll check on that too.

Ok, I fixed my code so that I don't have text within the ul's. Was using it because it worked... so as an aside, how do you get a title for the ul's?

felgall · 11-14-2012, 08:38 PM

Quote:

Originally Posted by comport9

My doctype should be valid for HTML5 no?

There isn't anything HTML 5 specific in your code so an HTML 4 strict doctype could be used.

HTML 5 doesn't have a doctype of its own as it currently just uses the short version of the HTML 2+ doctype.

comport9 · 11-14-2012, 11:15 PM

I think this'll be the last time I post about this. (hopefully...)

But here's my latest code;

HTML

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="test2.css" />
	<title>
	test
	</title>
</head>
<body>
	<div id='wrapper'>
		<ul class='ul'>
			<li class='link'>One1</li>
			<li class='link'>One2</li>
			<li class='link'>One3</li>
			<li class='link'>One4</li>
		</ul>
		<ul class='ul'>
			<li class='link'>One5</li>
			<li class='link'>One6</li>
			<li class='link'>One7</li>
			<li class='link'>One8</li>
		</ul>
		<ul class='ul'>
			<li class='link'>One9</li>
			<li class='link'>One10</li>
		</ul>
		<ul class='ul'>
			<li class='link'>One11</li>
			<li class='link'>One12</li>
			<li class='link'>One13</li>
			<li class='link'>One14</li>
		</ul>
		<ul class='ul'>
			<li class='link'>One15</li>
			<li class='link'>One16</li>
			<li class='link'>One17</li>
			<li class='link'>One18</li>
		</ul>
	</div>
</body>
</html>

Style

Code:

.ul {
	float: left;
	width: 400px;
	height: 250px;
	border: 1px solid red;
	}

Works just how I want it to, except that the boxes aren't centered. If I put in a width for the wrapper, then the columns don't shift appropriately. Same thing if I add padding or margin... I don't want any part of the columns disappearing off the side of the screen.

Why is this so difficult?

Excavator · 11-14-2012, 11:45 PM

Quote:

Originally Posted by comport9

Thanks. I'll work on that right now. I've set my div's margin's to auto before, however, I can't set the width to 100% and have everything aligned. I have to specify an exact width.

You can't center a 100% width element. It takes the full width of it's container.

Excavator · 11-14-2012, 11:47 PM

Quote:

Originally Posted by comport9

... so as an aside, how do you get a title for the ul's?

Scroll up and see what I said about Definition Lists.

If your locked in to using a ul, you can put a class on the li that contains your title and style it differently than the other li's.

Excavator · 11-14-2012, 11:58 PM

Quote:

Originally Posted by comport9

Why is this so difficult?

Isn't this fun

They don't center because you have them floated left. Your original question asked how to line them up and drop them to the next line when the screen narrowed...that's how floats act.

If you want them centered,

Code:

.ul {
	width: 400px;
	height: 250px;
	margin: 0 auto;
	border: 1px solid red;
	}

Maybe you're looking for something more like this?