CodingForums.com - Centering div/ul's

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Centering div/ul's (http://www.codingforums.com/showthread.php?t=282479)

comport9

11-18-2012 02:58 AM

Centering div/ul's

I have ul "boxes" that are floated left, so they appear next to each other, and fall under each other when the screen size is reduced, ensuring they are never off-screen. However, what I can't get is how to have the centered. They are always left-aligned.

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;

        margin: 0 auto;

        width: 400px;

        height: 250px;

        border: 1px solid red;

        }

I know if I give the div an absolute width, say 1200px, it'll be centered to the width. However, doing that prevents the ul's from shifting according to screen size. "width: 100%" doesn't work. Any suggestions? Or is this impossible? Thanks!

sunfighter

11-18-2012 05:19 AM

You need to do a reset and then use text-align:center;

Code:

<style type="text/css">

/*   we start with the reset   */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

        margin: 0;

        padding: 0;

        border: 0;

        font-size: 100%;

        font: inherit;

        vertical-align: baseline;

}

ul {

float: left;

margin: auto;

width: 400px;

height: 250px;

border: 1px solid red;

text-align:center;  // add this

}

</style>

comport9

11-18-2012 06:29 AM

Nice try. But it's still not working. I don't want the text within the ul's to be center aligned, I want the "boxes" themselves to be center aligned.

As long as the white-space (margins...?) to both sides is unequal and/or the "boxes" don't realign themselves automatically with a smaller view port, it's not what I want. :(

Excavator

11-18-2012 09:35 AM

Hello comport9,
Looks like you and Windbrand are in the same class?

Your ul's are left aligned because that's what you told them to do. You can't center them and float them left, not without some margin or padding to push them toward the center and then that messes up the layout when they drop.

Look at that solution for Windbrands question, or this -

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<style type="text/css">

html, body {

        margin: 0;

        background: #fc6;

}

#wrapper {

        padding: 10px 10px 50px;

        text-align: center;

        background: #333;

}

.ul {

        width: 400px;

        height: 250px;

        display: inline-block;

        text-align: left;

        border: 1px solid red;

}

</style>

<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>

comport9

11-18-2012 03:10 PM

Thanks man! I think this is actually working. :) No, I don't know who "Windbrand" is and I'm not in any class. Just seems to work out that way. :)

One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?

Thanks again!

Excavator

11-18-2012 03:25 PM

Quote:

Originally Posted by comport9 (Post 1293000)

One small thing, the ul box with fewer list elements within isn't lined up exactly with the others, it's a little lower. Which throws everything off. Could you tell me why this is?

It's because of the different height, when those ul's break to the next line they take the next space available. The only way I know to fix that is to have all the uls be the same height.

comport9

11-18-2012 06:33 PM

But I've specified a height in the css for them... I'm sure I can simply write a bit of code that adds some extra empty li elements, but that feels kinda like a hack.

Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.

Excavator

11-18-2012 07:32 PM

Quote:

Originally Posted by comport9 (Post 1293022)

Edit: Adding a bit of code to include empty li elements worked. (Had to use html markup of a space). But if you have a CSS solution, I'd much prefer to use that.

Code:

.ul {

        width: 400px;

        height: 250px;

        display: inline-block;

        text-align: left;

        border: 1px solid red;

  overflow: auto;

}

Quote:

(Had to use html markup of a space).

I think this is also a hack and unnecessary.

Excavator

11-18-2012 07:52 PM

You will probably want to know this little trick also.

comport9

11-18-2012 08:51 PM

Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it. Although they are lined up now. lol.

Edit: Just read the "little trick" you mentioned. Pretty funny. Luckily I don't care to support out-dated browsers at all. :)

Excavator

11-18-2012 09:56 PM

Quote:

Originally Posted by comport9 (Post 1293034)

Overflow option didn't work... Edit: I'd put it to the wrong css... however, it doesn't exactly work as intended, as now each ul has a scroll bar in it.

Let's have a look at the most recent version of your code.

comport9

11-18-2012 10:40 PM

Alright, overflow "does" work on my test bed. However, using it on my site didn't work. After some testing I realized it's because I have a button whose borders I've put outside of the ul box. The portions of the button that are outside of the box are cut off, and then a scroll bar is made inside the box.

Excavator

11-18-2012 10:55 PM

If you set your height and you have overflow, you get a scroll bar. You can always use overflow: hidden; to get rid of the scroll but you also lose the content.

The solution is to make sure your content fits in its container.

All times are GMT +1. The time now is 01:14 AM.