www.webdeveloper.com
Results 1 to 7 of 7

Thread: how to get colums to line up in the center

  1. #1
    Join Date
    Jul 2014
    Posts
    8

    how to get colums to line up in the center

    im playing around with some html and css trying to learn new things etc. im making columns, probably not the right way but its the only way i know right now. i got them lined up horizontally. then i got them lined up more towards the center which is what i wanted, i will copy my css code here at the end of this question. i used margin-left: is there a better way or is that basically the only way? i used div tags to make the columns. im not quiet sure when to use divs yet.

    Code:
    .turtle{
    	border:1px solid #616536;
    	width:200px;
    	height: auto;
    	color:#31B96E;
    	float:left;
    	padding:10px;
    	margin-left:150px;
    }
    .green{
    	border:1px solid #616536;
    	width:500px;
    	height: auto;
    	color:#31B96E;
    	float:left;
    	padding:10px;
    }
    
    .apple{
    	border:1px solid #616536;
    	width:200px;
    	height: auto;
    	color:#31B96E;
    	float:left;
    	padding:10px;
    }

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    The way you wrote your HTML will affect how your CSS will produce the effects you want, so without seeing it, we cant help.

    Here is a simple example:

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #wrapper
                {
                    position: absolute;
                    left: 40%;
                }
                
                #content
                {
                    width: 100px;
                    margin: 0 auto;
                }
            </style>
        </head>
        <body>
            <div id = "wrapper">
                <div id = "content">
                    <p>This is the stuff to be centered</p>
                </div>
            </div>
        </body>
    </html>
    The CSS for the wrapper div positions it to the center of the screen. The CSS for the content div displays the paragraph in column form based on a width of 100px.
    Last edited by Error404; 07-17-2014 at 09:25 PM.

  3. #3
    Join Date
    Feb 2014
    Posts
    4
    Try this:
    Code:
    .turtle{
    	border:1px solid #616536;
    	width:200px;
    	height: auto;
    	color:#31B96E;
    	display:inline-block;
    	padding:10px;
    	
    }
    .green{
    	border:1px solid #616536;
    	width:500px;
    	height: auto;
    	color:#31B96E;
    	display:inline-block;
    	padding:10px;
    }
    
    .apple{
    	border:1px solid #616536;
    	width:200px;
    	height: auto;
    	color:#31B96E;
    	display:inline-block;
    	padding:10px;
    }
    And add three divs in a div i used container.. here the html:
    HTML Code:
    <div class="container">
    <div class="turtle"></div>
    <div class="green"></div>
    <div class="apple"></div>
    </div>

  4. #4
    Join Date
    Jul 2014
    Posts
    8
    oh ok, when i tried display-inline i forgot the block haha thats why it didnt work. question about the containter, is that just a name you called it or should it be called that? the teacher on udemy used a container class too.
    thank for your help

  5. #5
    Join Date
    Feb 2014
    Posts
    4
    You can call it whatever you want..i just used container..just put text-align:center to the the class you called(ie container)..

  6. #6
    Join Date
    Jul 2014
    Posts
    8
    ok, i was just wondering cause i seen the guy use it that was teaching also. sorry for asking all these questions, im new and just learning. thank you for your help

  7. #7
    you have used the class in the div tag .Div tag divides the page into parts .Each class is responsible for the different settings

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles