Image and Text Alignment Inside Container

Question

Hello I have created a simple box which will hold text and an image, I need the text aligned left with the image on the right. I have set my box height to auto so text will automatically increase the size of the box. If I float the text and image, the box no longer increases size. In fact the box actually disappears.

Is there any way to have a box that automatically increases size, and have my text and images aligned in css?

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Kawasaki Motorcycle Club UK</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="wrapper">
        <header>
        </header>
            <nav>
                <ul class="main_menu">
                    <li><a href="bikes.html">BIKES</a></li>
                    <li><a href="news.html">NEWS</a></li>
                    <li><a href="events.html">EVENTS</a></li>
                    <li><a href="join.html">JOIN</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>                        
            </nav>
        </div>
    <div id="box">
        <div id="text">
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
                CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
                CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        <div id="image">
            <img src="mybike.jpg"/>
            </div>
        </div>
    </div>
</body>

#box {
width: 1000px;
height: auto;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
}

#text {
text-align: left;
color: #FFF;

}

#image {
text-align: right;
}

Answer 1

Put the image before the text and float only it to the right. Since you float a child element, the parent will collapse and act like it doesn't exist, so you need to add overflow:auto to the parent to restore the behavior that you're after.

 #box { width: 1000px; margin: 0 auto; background-color: #383131; border-radius: 5px; overflow:auto; } #text { color: #FFF; } #image { float: right; }

 <div id="box"> <div id="image"> <img src="http://www.placehold.it/100x100" /> </div> <div id="text">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div> </div>

Image and Text Alignment Inside Container

Question

1 answers

solution1
0 ACCPTED 2015-03-16 02:07:17

Image and Text Alignment Inside Container

Question

1 answers

solution1 0 ACCPTED 2015-03-16 02:07:17

solution1
0 ACCPTED 2015-03-16 02:07:17