Centering A Div - without having to center the content in it

Pages: 1, 2
free web hosting

Read Latest Entries..: (Post #19) by heirufox on Sep 6 2007, 09:16 PM. (Line Breaks Removed)
Someone posted about the tag <center>. This tag is depricated and is no longer a valid HTML tag (as stated by the W3C - World Wide Web Consortium). So, yes use what TavoxPeru said.Just thought I would let you know!
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

Centering A Div - without having to center the content in it

MediYama
I'm now rebuilding my website, and I have come against a problem of which I don't know how to fix it. I am using div tags (of course) but what I want to know is how to center the site, without having the text layout centered. Does anyone know how? I have not found any solutions yet. Thanks in advance.

MediYama

Reply

Sten
ummm...

"nice share" u arent even reading wot ppl write sirat.

i have my whole site centered just with center tags.

but, everything else is in table inside tables inside tables so it doesnt affect them.
but, if u want to center your site like that, u could use margins? the same on both side.

Reply

MediYama
Sten, when I use center tags,

All the text is also centered like this, which I don't want


I want the site to be centered (the background, the boxes) but the text to just be slammed to the left side.

Reply

Sten
Like i said, margins

it will put it all in the middle if you make the left and right margins the same.

Reply

MediYama
Alright, I'll try. Thanks.

Edit: It does what it's supposed to do, but it makes a problem with different resolutions... Any other solution?



Another edit: Solved my problem, thanks anyway! smile.gif

Reply

.:Brian:.
just use css to set the left and right margin to auto, and you'll be able to center your div (assuming you also have a width set for the div).

An example would be:
CODE
<div id="content" style="width: 745px; margin-left: auto; margin-right: auto;">the content here</div>


So if centering your site, you would put your website inside of that.

Hope this helps, if it doesn't I would recommend posting a link to either your website, or an example of an attempt at what you are doing, so we can take a look at the code, and provide more specific help.

Reply

TavoxPeru
QUOTE(MediYama @ Jul 15 2007, 05:53 AM) *
I'm now rebuilding my website, and I have come against a problem of which I don't know how to fix it. I am using div tags (of course) but what I want to know is how to center the site, without having the text layout centered. Does anyone know how? I have not found any solutions yet. Thanks in advance.

MediYama

If you want to center horizontally your div or any other block element you can use achieve this with:
CODE
<div style="width:10em;margin:0 auto">div content</div>


Best regards,

Reply

MediYama
Well I fixed it already, using margin: 0 auto; in the css file.

Reply

Sten
oh yeah, woops, forgot to say!

margins dont work too well in other resolutions. i had that problem once when i was making a website for school for an assignment or something.

anyway, u fixed it and thats wot counts biggrin.gif

Reply

.:Brian:.
auto margins will work fine in other resolutions....it is when you have margins set so that they are not auto or not percentage values that you run into problems.

Reply

Latest Entries

heirufox
Someone posted about the tag <center>. This tag is depricated and is no longer a valid HTML tag (as stated by the W3C - World Wide Web Consortium). So, yes use what TavoxPeru said.

Just thought I would let you know!

Reply

Halo
this was helpful
thanks guys...

Reply

MrSchpfmut
Good suggestions from all.
Here's another method I personally use with a negative margin. (I like the math! wink.gif )
Works in IE6/7, FF, & Opera

CODE
#name {
position: absolute; left: 50%;
width: 600px;
margin: 0 0 0 -300px;
}

You can use position: relative; if you are centering to a parent element, rather than the browser's window.

Reply

TavoxPeru
QUOTE(Habble @ Jul 20 2007, 12:47 AM) *
Another way to center the div, is by placing it in <center> tags, and adding the following CSS:

text-align: left;

That's correct but the center tag is deprecated and must be avoided, instead to get the similar result you use margin:0 auto as posted in previous posts.

Best regards,

Reply

Habble
Another way to center the div, is by placing it in <center> tags, and adding the following CSS:

text-align: left;

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

Pages: 1, 2
Recent Queries:-
  1. div vertical center screen - 129.86 hr back. (1)
  2. "centering a div" "internet explorer" - 556.95 hr back. (1)
Similar Topics

Keywords : centering, div, center, content

  1. See What Content You Have For Any Given Keyword
    (3)
  2. Center In Table Cell With Span
    (8)
    I used colspan in a table along with center in CSS code is: CODE .boldtable1 {
    position:absolute; top:217px; left:250px; font-family:sans-serif; font-size:12pt; color:yellow;
    background-color:black; } .boldtable1 TD, .boldtable1 TH { font-family:sans-serif; font-size:8pt;
    width=162px; color:yellow; background-color:black; text-align:center; vertical-align:middle; } I
    use in table CODE . . ... The text becomes centered as if no cells were merged, there is
    merging of cells but the text is centered where the first cell was. ....
  3. Center Update
    Make the center of the page change only (5)
    This is going to be a little hard to explain so just let me know whats confusing you. Ok I'm
    making an online game and i will have a banner on top and have all the page links on the left and
    have other options on the right and when ever you click one of these links i want it to open in the
    center of the page and want the rest of the page to look the same. In other words i want the page
    layout the same and what ever page you go to open in the center which will also be in a box/table.
    How could i do this. I know it's possible because I've seen it on many other ....
  4. Center In Height
    (8)
    I can make the text appear in the center of the box by CODE text-align:center But that only
    works in width i also want it to be centered in height, meaning the word appears exactly in the
    middle of the box.....
  5. Using Blogger To Add Content
    Can I get rid of the header? (9)
    OK, so I'm building my site and want to add a blog element. Not having PHP and MySQL under my
    belt yet, I figure I'll use Blogger. Here's what I do: I set up the account on Blogger and
    create the blog with my site as the location I erase the blog's template code and copy and
    paste my site in its place I copy and paste the essential Blogger tags and everything in between
    that makes the blog element work Functionality is great. I can post on blogger, and it updates my
    site without having to go into the html for every addition. Layout and look is a nig....
  6. Recognizing Third-party Content In Firefox
    (2)
    Hi, Has anyone managed to block third-party content using the AdBlock Plus extension for Firefox?
    I found an article here: "Recognizing third-party content"
    http://adblockplus.org/blog/recognizing-third-party-content where the developer says it's
    possible, but I don't understand the practical implementation. Thanks.....
  7. Spider Simulator Tool
    See your content the way the search engines do (0)
    The Spider Simulator tool will help you to see your content the way the search engines do! Spiders
    don't operate like normal users, and yet you've got to take their perspective into account.
    Just enter the URL in which you're interested, and the Spider Simulator tool will return
    "spidered" page titles, text, meta descriptions, meta keywords, internal links, and external links.
    Use this information to your advantage and gain new insight into how the search engines work.
    QUOTE A lot of content and links displayed on a web page may not actually be vis....
  8. Content Sites And Mini Sites
    (1)
    Content sites usually profit by educating their visitors. For example, a content site focusing on
    dog grooming might provide a basic tutorial to assist their visitors in learning how to groom a dog.
    They provide this tutorial completely free; however, the main purpose for this tutorial is to
    educate their visitors and promote their products. When you provide your visitors with quality
    information that teaches and informs, you are not only gaining their trust in you by sharing your
    expertise, but you're also building your credibility, which is very important on the ....
  9. Joomla! The Easiest Content Manager!
    (8)
    Joomla! is something I've recently discovered that is wonderful for creating/managing a website
    if you have access to a SQL database. It really is self explanatory; however, you may have to spend
    some time learning the ins and outs of the package to get the full benefits of it. There are many
    templates for it and there are a ton of different additional apps available for it that allow
    ecommerce capability and many other features to the ones that are included by default. CM....
  10. Live Search Webmaster Center
    (1)
    I find that it is very useful in many ways. My site is now included in the listings and if you type
    the name of m,y site it's the first link. I've used the yahoo webmaster tools (site
    explorer), google webmaster tools and Live search webmaster tools. I think that the Live search one
    is better. Yahoo is useless and google is ok but hard to get into listings. This is only my opinion.
    What do you think of Live Search webmaster central?....
  11. Walmart Photo Center
    (7)
    Walmart promises to have "Always low prices, always", but using their services has its
    disadvantages. Sometimes I just feel like Walmart really doesn't care about the consumers who
    shop there. I recently bought some Duracell batteries at Walmart, and on the cover said to see
    inside for a code to receive 20 free prints from their photo center. I open the pack of batteries,
    and there it was: A code to enter to receive the free prints. I go online on the walmart photo
    center website to order the free prints, and they tell me that the page cannot be displayed due to
    so....
  12. How Do I Virtual Pc +web Server + Cms
    Setting up a virtual server for Content Management Systems (5)
    Does anyone have any experience with MS Windows Virtual PC. I need help with setting up my os for an
    optimal sandbox configuration. What I would like to do once Virtual PC is setup, is to experiment by
    learning how to work with Content Management Systems on Windows XP and/or Vista. I've
    downloaded several different distributions like Drupal, Joomla, Sugar CRM, Zope, Plone, and some
    others. But I guess they need other technologies like apache, python, java, mysql, php, and others.
    I don't have an extra pc or resources to spare for setting up or turning my pc into....
  13. Transform Your Classic Xbox Into A Killer Media Center
    (1)
    Don't ditch your classic Xbox just because you can't play Halo 3 on it: now it's easier
    than ever to transform that old neglected console into a Unix-based media command center. A simple
    software exploit lets you replace Microsoft's crippled dashboard and run the incredible, open
    source Xbox Media Center (XBMC) software.
    http://lifehacker.com/software/geek-to-liv...nter-299809.php ....
  14. Plone 3
    Content Management System (0)
    Plone 3 - a revolution in content management has just been released. It's CSS based and
    ultimately powerful. I love it. Do you? Learn more: www.plone.org Get latest version:
    http://plone.org/products/plone Anyone had any experience with other content management systems?
    I'd be interested to know.....
  15. Problem With Selecting A Textbox Content
    (0)
    What i want to do is to first enabled a disabled text box, and then focus and select all the
    contents of this text box after the user clicks on a checkbox, i have it working with simple HTML
    and Javascript but how can i do to get the similar result using the DOM??? For simplicity i only
    include this code that works: CODE <script type="text/javascript"> function
    toggle(formname,checkname) { var c="CantField"; if(checkname.checked==true) {
        checkname.value="on";     document.f .disabled=false;     document.f .focus();     document.f
    .select(); } else {     c....
  16. Make You Own Wii Media Center
    (6)
    What does it take to create a truly functional Wii media center on a Mac? First using Wii
    Transfer you can stream music and photos from a Mac. Next using Wii Media Center you can stream
    video as well. Wii Hear is a website which streams Internet radio stations using Flash. You can
    also Finetune this by creating your own Internet radio stations around a favorite Artist. Lastly,
    Viewii is a site allowing you to see all the YouTubes. Hence, you now have a Wii Media Center,
    finally.....
  17. The World
    Content here is for the world (0)
    This content deleted since it is not following update. Please visit www.silverbluewater.com for
    more information of this very post here.....
  18. Centering The Page
    Like MSN.com and some other sites (9)
    Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The
    problem is that I want the whole thing centered in the middle of the screen with equal margins at
    the sides. My CSS is at (Gone, this was MY site - 404) http://portal.trap17.com/wdl/styles.css and
    as you would probably guess, my site is at (Gone, this was MY site - 404)
    http://portal.trap17.com/wdl/ It is centered in Gecko (Firefox) browsers, but in Internet Explorer
    it isn't centered. No matter what I use, whether it is a container or centering the and
    elements, it....
  19. Writting Tutorials For Your Website
    An Overview To Layout And Content (4)
    I was recently asked about suggestions for tutorial layouts. QUOTE(Chesso @ Mar 31 2007, 11:01
    AM) 100770 vujsa sorry to cut in here, but do you have any advice for tutorial layout (and like
    what is good to build for creation)? My site has somewhat a simple and good enough file layout,
    just basic tables with minimal information, description and screenshot, but I have never gotten the
    tutorial aspect off the ground because it's rather annoying to write for and have it displayed
    nicely. I'll attempt to give some insite and guidence in this area but not ....
  20. Can Search Engine Spiders See Dynamic Content?
    (1)
    I want to make a web page using PHP codes to require() a list of keywords to put in between the
    meta keywords tag. If I did this, would the search engines be able to see these PHP generated
    keywords, thus making it more SE friendly?....
  21. Wordpress To Drupal Migration
    Specific and generic content handling (0)
    Lately, I have been thinking on moving from the Wordpress engine to Drupal engine. I already have a
    Drupal engine (4.7) running at my root. (www.example.com/) and I have my blog running in a
    subfolder (www.example.com/blog). Now, here is why I think I should be moving my Wordpress blog
    into Drupal: - Both my site and the blog, deals with providing articles and content - Though, posts
    and writeups are a bit fast moving on the blog, they are rather timeless, and according to my
    pipeline - I would use them to make in depth articles/content at my site. - I can have better ....
  22. How To Build A Pure Css Using Online Tools Tutorial (part 3)
    footer and main content box (0)
    Step: 3 Usually The footer is a simple design of lett people know who design it, when the design
    was made and of course links to the HTML and CSS validation thats about it really. Of course if you
    plan to have more links to different website services then I recommend this drop down menu that
    opens up instead of down. Drop Down Menu Step 4 Since that was a simple step how about
    we design our content box make it look stylish in the sense that you can make rounded corners, use a
    background image or setting up stylish news headers. NOTE: Their are litter....
  23. PHP & MySQL: Displaying Content From A Given ID
    (6)
    Okay so I got this sample link (not working): http://www.acosta.com/joo.asp?id=654 Now suppose
    I have a PHP file that would use MySql in order to get all values in the row where id 654 is found.
    Here's a sample DB: Table: demnyc ______________________________________ | id |
    Name | Age | Email | *----------------------------------------------------* | 1
    | Albert | 17 | no email |
    *----------------------------------------------------* | 2 | YaPow | 888 |
    no email | |__________....
  24. Content Management Systems
    An Overview (0)
    QUOTE Synopsis This is an article to understand the basics of Content Management System (CMS).
    It would briefly look into the origins and advent of CMS. It would also look into few of the
    variations and the technology involved in the design of CMS. This article would be focusing on the
    CMS from the perspective as a website, but it must be noted that similar technology and design
    principles go into a CMS for a in-house or intranet based CMS for any organization. Introduction
    Content Management System (CMS) is just that - what the words mean. If an attempt has to ....
  25. Blog Software Or Content Management System
    For a website to serve as a quality article library (7)
    Ok. I am puting this thread here 'casue szupie told me to put it here . /tongue.gif"
    style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> I like it when I can point
    the fingers at someone else. /smile.gif" style="vertical-align:middle" emoid=":)" border="0"
    alt="smile.gif" /> I have been around having a Asta Host account and doing nothing with it but
    experimenting with PHP and MySQL. I even tried my hand at desiging a CMS, and I am pretty sure, I
    can get a very basic one ready. But I have got my attention diverted to various other ....
  26. What Content Managers For Websites You Use?
    (4)
    Do any of you guys use a content manager to create and edit your website? I find that Mambo is very
    simple and nice to use. I know there are a lot of them out there, so what else do people use?....
  27. CMS102 - Content Management System Design
    Basic CMS With PHP & Flat File Databases (9)
    This topic is a follow up to CMS101 - Content Management System Design and PHP Tutorial: Menu Or
    Sidebar Script For CMS101 Overview: Now that we have discussed the basic concepts
    of a CMS written in PHP, we should begin to think about ways to make those concepts more useful and
    more powerful. Basically, using only what we have discussed so far, your website would still need a
    file for each and every page you wanted to display to your users. What we will discuss now a method
    of only creating one template file and a script that will automatically cha....
  28. Turn Your Gaming Console Into A Media Center Pc
    (3)
    I was going to post this in the Gaming Boards, but I really think this has more to do with Computer
    Talk than Gaming. Recently my one friend, "hacked" his XBOX to allow it to become a Media Center
    computer. Through an exploit from Mech Assault for XBOX, he can run executable code from a Memory
    Card. Home brew developers created a easy to follow walkthrough to load OS-like software to the
    XBOX that turns it into a real easy to navigate Media Center. We can stream video, music, and
    photos from the computers on our LAN and download from the internet. I haven't seen....
  29. Media Center
    what's the best media center software (8)
    what do you guys think is the best media center software i already know media portal and windows
    media center edition 2005. i know windows MCE is more stable, but the best of media portal is that
    it's open source, everybody can make additional things for it. what software do you guys use,
    and why? i personally use media portal, it's freeware....
  30. Creating A Content Managing System
    Using MySQL (15)
    This tutorial is for beginners that know some php and know the basics of MySQL. I will tell you how
    to make a simple Content Managing System. A Content Managing System is a way of editing and adding
    your content using your browser, so you dont have to go trough ftp all the time. This CMS uses
    MySQL databases. So what we need to do is to create a database. Well go through this step by step to
    make it as easy as posible: 1. Go in to your cPanel and select phpMyAdmin. 2. Write the name of
    your database in the input box under the text: Create new database. This database ....

    1. Looking for centering, div, center, content






*SIMILAR VIDEOS*
Searching Video's for centering, div, center, content
Similar
See What Content You Have For Any Given Keyword
Center In Table Cell With Span
Center Update - Make the center of the page change only
Center In Height
Using Blogger To Add Content - Can I get rid of the header?
Recognizing Third-party Content In Firefox
Spider Simulator Tool - See your content the way the search engines do
Content Sites And Mini Sites
Joomla! The Easiest Content Manager!
Live Search Webmaster Center
Walmart Photo Center
How Do I Virtual Pc +web Server + Cms - Setting up a virtual server for Content Management Systems
Transform Your Classic Xbox Into A Killer Media Center
Plone 3 - Content Management System
Problem With Selecting A Textbox Content
Make You Own Wii Media Center
The World - Content here is for the world
Centering The Page - Like MSN.com and some other sites
Writting Tutorials For Your Website - An Overview To Layout And Content
Can Search Engine Spiders See Dynamic Content?
Wordpress To Drupal Migration - Specific and generic content handling
How To Build A Pure Css Using Online Tools Tutorial (part 3) - footer and main content box
PHP & MySQL: Displaying Content From A Given ID
Content Management Systems - An Overview
Blog Software Or Content Management System - For a website to serve as a quality article library
What Content Managers For Websites You Use?
CMS102 - Content Management System Design - Basic CMS With PHP & Flat File Databases
Turn Your Gaming Console Into A Media Center Pc
Media Center - what's the best media center software
Creating A Content Managing System - Using MySQL
advertisement




Centering A Div - without having to center the content in it