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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    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>

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    comport9 (11-18-2012)

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by comport9; 11-18-2012 at 07:14 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    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;
    }
    (Had to use html markup of a space).
    I think this is also a hack and unnecessary.
    Last edited by Excavator; 11-18-2012 at 07:53 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You will probably want to know this little trick also.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by comport9; 11-18-2012 at 09:22 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by comport9 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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