CODEWITHSUNDEEP
htmlcssresponsive-design
user2247838
user2247838

Reputation: 33

Align a text and a image next to each other

How can I align a div which contains text and an image next to each other so that it remains fixed until the width is around 768px?

This is my code:

<html>
<head></head>
<body>
<div class="column_1">
   Contains bigger width
</div>
<div class="column_2">
<div class="imageSection">
<img src="http://www.smashbros.com/wii/en_uk/characters/images/link/link.jpg">
</div>
<div class="text">
<div class="text1">Data will be here</div>
<div class="text1">Data will be here</div>
<div class="text1">Data will be here</div>
</div>
</div>
</body>
</html>

CSS styles

.column_1 {width:65%;}
.column_2 {width: 35%;}

.column_2 .imageSection {width:45%; display:block; float:left}
.column_2 text {width:45%}

Can anyone please let me know how to proceed. I am stuck at this point where I am unable to align it.

Upvotes: 0

Views: 83

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

Please check this, the image and the content are placed next to each other until 768px and for screens smaller than 768px, the image is stacked above the content.

 .column_1 {
     width:65%;
 }
 .column_2 {
     width: 35%;
 }
 .column_2 .imageSection {
     width:45%;
     display:block;
     float: left;
 }
 .column_2 text {
     width:45%
 }
 @media (max-width: 768px) {
     .column_2 .imageSection {
         float: none;
     }
 }
<div class="column_1">Contains bigger width</div>
<div class="column_2">
    <div class="imageSection">
        <img src="http://www.smashbros.com/wii/en_uk/characters/images/link/link.jpg" width="100%">
    </div>
    <div class="text">
        <div class="text1">Data will be here</div>
        <div class="text1">Data will be here</div>
        <div class="text1">Data will be here</div>
    </div>
</div>

Upvotes: 1

Related Questions