TalkPHP - Some css problems..

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Some css problems.. (http://www.talkphp.com/xhtml-html-css/2610-some-css-problems.html)

Some css problems..

Hey!

I have this:
Untitled Document

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>



<link href="includes/gfx/poems.css" rel="stylesheet" type="text/css" />



</head>

<body>

<div id="content">

        <div class="poemContent">

                

                <div class="poemContentPoem">

                        GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />



GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />



GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

                </div>

                

                <div class="poemContentTitle">

                        <h1>Best mom</h1>

                        <strong>To : Mom</strong>

                </div>

        

                <div class="poemContentDesc">

                        <h2>Description:</h2>



                        Wrote this just now

                </div>

        

</div>

</body>

</html>

And as you see, the inner right box is overlapping the outer big box, and I don't want that. I want the outer to expand together with the inner ones..

Here's the css:

Code:

.poemTitle {

        

        text-align: center;

        border-bottom: 1px solid #000;

        font-size: 20px;

        font-weight: bold;

        

}



.poemDesc {

        

        text-align: center;

        font-weight: italic;

        padding: 20px 10px;

        

}



.poemInfo {

        

        text-align: center;

        border-top: 1px solid #000;

        

}



.poem {

        

        border: 1px solid #000;

        width: 230px;

        float: left;

        margin-right: 8px;

        margin-bottom: 15px;

        

}



.poemContent {

        

        border: 1px solid #000;

        padding: 10px;

        

}



.poemContentPoem {

        

        float: right;

        text-align: left;

        width: 660px;

        border: 1px solid #000;

        padding-top: 10px;

        padding-bottom: 30px;

        padding-left: 10px;

        padding-right: 10px;

        text-align: center;

        

}



.poemContentTitle {

        

        width: 450px;

        margin: 0;

        padding: 0;

        text-align: center;

        border: 1px solid #000;

        padding-bottom: 10px;

        

}



.poemContentDesc {

        

        width: 450px;

        border-right: 1px solid #000;

        border-bottom: 1px solid #000;

        border-left: 1px solid #000;

        text-align: center;

        padding-bottom: 20px;

        

}



.poemContentDesc h2 {

        

        padding-top: 5px;

        text-decoration: underline;

        margin-top: 0;

        font-size: 15px;

        text-align: center;

        

}

THanks in advance!

Is it the bit just under the contact button at the top?
(And why are you using tables!?)

Try this: (not tested)

Code:

#content{

width: /*width of both columns combined*/;

}

Lol. They're doing maintence right now.. so you can't see my page :-P

@up- won't work because some poems are longer, and some are shorter, so.. but I assume you didn't see my page, but only the maintence message.

@gar- I'm not.. :-P

Added the code here..

It would be handy to see it online :), since not everybody wants to c/p the code and run it localy. (Im at work)

Code:

.clr { clear: both; }

Code:

<div class="clr"></div>

And put it after inner... sorry but didn't test it but problem sound like that this should help.

Sorry. The admin check on the webserver has been completed, so you can view the site now!!!

@up- Will try it! :-D

Tanax, as marxx said, you should clear:both.

For example;

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>



<style type="text/css">

.poemTitle {

        

        text-align: center;

        border-bottom: 1px solid #000;

        font-size: 20px;

        font-weight: bold;

        

}



.poemDesc {

        

        text-align: center;

        font-weight: italic;

        padding: 20px 10px;

        

}



.poemInfo {

        

        text-align: center;

        border-top: 1px solid #000;

        

}



.poem {

        

        border: 1px solid #000;

        width: 230px;

        float: left;

        margin-right: 8px;

        margin-bottom: 15px;

        

}



.poemContent {

        display: block;

        border: 1px solid #000;

        padding: 10px;

        

}



.poemContentPoem {

        

        float: right;

        text-align: left;

        width: 660px;

        border: 1px solid #000;

        padding-top: 10px;

        padding-bottom: 30px;

        padding-left: 10px;

        padding-right: 10px;

        text-align: center;

        

}



.poemContentTitle {

        

        width: 450px;

        margin: 0;

        padding: 0;

        text-align: center;

        border: 1px solid #000;

        padding-bottom: 10px;

        

}



.poemContentDesc {

        

        width: 450px;

        border-right: 1px solid #000;

        border-bottom: 1px solid #000;

        border-left: 1px solid #000;

        text-align: center;

        padding-bottom: 20px;

        

}



.poemContentDesc h2 {

        

        padding-top: 5px;

        text-decoration: underline;

        margin-top: 0;

        font-size: 15px;

        text-align: center;

        

}



.clr { 

        

        clear: both; 

        

}

</style>



</head>

<body>

        <div id="content">

                <div class="poemContent">

                        

                        <div class="poemContentPoem">

                                For all the times you've helped me,<br />

                                I can't thank you enough.<br />

                                You've always been an angel,<br />

                                eventhough you also had it rough.<br /><br />

                                

                                You're one of my best friends, if not the best,<br />

                                I just hope that you the same way feel.<br />

                                Because you're special, you're not like the rest,<br />

                                you can really help me heal.<br /><br />

                        </div>

                        

                        <div class="poemContentTitle">

                                <h1>Best friend</h1>

                                <strong>To : Karolina</strong>

                        </div>

                

                        <div class="poemContentDesc">

                                <h2>Description:</h2>

                                I wrote this to a very good friend of mine, who's always been there for me.

                        </div>

                        

                        <div class="clr"></div>

                

                 </div>                

        </div>

</body>

</html>

Gareth

Worked perfectly!! Thank you :-D

Tanaxia v1

Click read more :-)

Actually, there's one more thing on this website.
How can I make so I can write european letters, such as "å ä ö" in the document, without having to use the html codes ¨ and whatever the others are..

I read somewhere that you could set the charset to utf-8, but it didn't work =//

I'll put up a swedish poem now, so you'll see what I mean..

Edit: gash. It removed all the åäö.. usually it's a questionmark. But anyways, how can I make it work?? ://

Edit2: It works now :O lol

Thanks :-D