[RESOLVED]CSS Formating

Hello,

I’m writing a blog style website and I’m having some trouble with my formatting.  For each post I want a picture on the left that is 280 widt by X high and I want the blog title on the right.  I have the whole post highlighted with a background color.  But
my <div> post doesn’t seem to be growing with my picture.  Any help would be greatly appreciated.

<head runat="server">
    <title>Sample Post</title>
    <style>
    .post img
{
    border: 1px solid #ddd;
    width: 280px;
    float: left;
     padding: 0px;
    margin: 0px 5px 0px 0px;
}

.post
{
     margin: 10px 0;
    width: 600px;
    padding: 10px;
    border: 1px solid #C9E5E9;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    background: #F5FEFF;
    height:
}
    </style>
</head>
<body>
    <div class="post">
        <div>
            <img alt="Blog Image" src="http://img3.wikia.nocookie.net/__cb20120402162925/glee/images/5/57/Pretty_girls_with_pretty_smiles_640_18.jpg" />
        </div>
        <div>
            <h1>
                <center>
                    <a style="color: #E5017D;" href="BlogsView.aspx?ID=1">Pretty Girl</a>
            </h1>
            </center>
        </div>
    </div>
</body>

try giving float:left

.post
{
     margin: 10px 0;
    width: 600px;
    padding: 10px;
    border: 1px solid #C9E5E9;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    background: #F5FEFF;
    float:left
   
}

Hi i have done few changes in it i have added a class on image post and content post as well. and added a clear both property so that it dos’nt  make any issue in your further posts

<head runat="server">
    <title>Sample Post</title>
    <style>
.postimg
{
    border: 1px solid #ddd;
    width: 280px;
    float: left;
     padding: 0px;
    margin: 0px 5px 0px 0px;
}
.postcontent{ float:left;}
.post
{
     margin: 10px 0;
    width: 600px;
    padding: 10px;
    border: 1px solid #C9E5E9;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    background: #F5FEFF;
    height:auto;
    clear:both;
}

    </style>
</head>
<body>
    <div class="post">
        <div class="postimg">
            <img alt="Blog Image" src="http://img3.wikia.nocookie.net/__cb20120402162925/glee/images/5/57/Pretty_girls_with_pretty_smiles_640_18.jpg" />
        </div>
        <div class="postcontent">
            <h1>
                <center>
                    <a style="color: #E5017D;" href="BlogsView.aspx?ID=1">Pretty Girl</a>
            </h1>
            </center>
        </div>

    </div>
</body>

Hope this will help you.

Hi,

use this:

.post
{
     margin: 10px 0;
    width: 600px;
    padding: 10px;
    border: 1px solid #C9E5E9;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    background: #F5FEFF;
    min-height:100px;
}
.post div
{
height:auto;
}
 

Also see in http://www.niceone.in/Problem/HTML/CSS-12

Hi JBryanB,

JBryanB

But my <div> post doesn’t seem to be growing with my picture.  Any help would be greatly appreciated.

From your description, this issue is related to the overflow property. By default, the overflow is not clipped. So, the content will renders outside the element’s box. If you want to change it. You could set the overflow property
as below:

        .post {
            margin: 10px 0;
            width: 600px;
            padding: 10px;
            border: 1px solid #C9E5E9;
            border-radius: 15px 15px 15px 15px;
            -moz-border-radius: 15px 15px 15px 15px;
            -webkit-border: 15px 15px 15px 15px;
            background: #F5FEFF;
            /*height: auto;*/
overflow:auto; }

More information about overflow property, please refer to the following link:

http://www.w3schools.com/cssref/pr_pos_overflow.asp

If you have any other questions about my reply, please let me know freely.

Best Regards,
Dillion

Leave a Reply