Newbie with problems with Ap div aligment

megb6806 · #1 Nov 15th, 2007, 06:29

Guys I am a complete newbie in the world of web design, I have been reading about AP divs and seem to have a alignment problem. Before hand I am using dreamweaver CS3.

My problem is when I position my AP div on my html file and see it on IE, it doesnot appear where it shoud be, it appears out of the page frame....please see OPTION 1 on attached file.

Then to fix the problem I have to move the Ap div to the right by 165 pixels, OPTION 2, then it looks ok in IE, however it shouldn't be like this.

Could anyone help me please to manage to keep the AP div centralised in both IE and dreamweaver...... this is my first web page and I am already having nightmares....thanks

MikeHopley · #2 Nov 15th, 2007, 08:20

Oh dear.

I don't know what an "Ap div" is. I guess it's Dreamweaver's term for an absolutely positioned <div>.

You should not be using absolute positioning yet. It causes all kinds of problems. Avoid it like the plague.

It doesn't matter what your website looks like in Dreamweaver. No-one will use Dreamweaver to see your site.

karinne · #3 Nov 15th, 2007, 12:25

I totally agree with Mike here ... don't use absolute positioning. Use floats instead.

Here a basic 2 column layout

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="en-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html, body, div { margin: 0; padding: 0; }
    
    body {
        margin: 0 auto;
        width: 770px;
    }
    
    #branding {
        background-color: #e6e2af;
    }
    
    #container {
        overflow: auto;
    }
    
    #menu {
        width: 200px;
        float: left;
        background-color: #900
    }
    
    #content {
        width: 560px;
        margin-left: 10px;
        float: right;
        background-color: #090;
    }
    
    #siteinfo {
        background-color: #009;
        color: #fff;
    }
    </style>
    
</head>

<body>

<div id="branding"><h1>some header stuff here</h1></div>

<div id="container">

    <div id="menu">menu here<br><br><br>all the way!</div>
    
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
        
        <p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
        
        <p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
    </div>

</div>

<div id="siteinfo">and some copyright bla bla here</div>

</body>
</html>

megb6806 · #4 Nov 16th, 2007, 04:13

thanks guys yes I think using the Ap div's (absolute position divs) is causing me lots of problems, I'll check the column layout in dreamweaver. Thanks for your help

Marc · #5 Nov 17th, 2007, 08:58

Another thing, learn HTML and CSS! It will make your life a lot easier in the long run.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Newbie having a few CSS problems!!	Graeme36	Web Page Design	18	Sep 29th, 2007 16:27
Should be simple problems but im a complete newbie	digi duck	PHP Forum	8	Jan 8th, 2007 09:47
CSS Newbie: Firefox alignment problems	SuperGrover1981	Web Page Design	1	Aug 31st, 2006 10:28
Newbie having problems w/code in O'Reilly book	Sqrlgrl	PHP Forum	5	May 31st, 2005 10:19

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Newbie with problems with Ap div aligment