CODEWITHSUNDEEP
pythonhtmlcssdjango
Aashutosh Kumar
Aashutosh Kumar

Reputation: 831

How to place text & Image side by side using CSS & HTML

For my Django Project, I want to align Text & Image side by side. But not able to achieve it. The Image is crossing the parent div box.

Can someone please help me to achieve below structure as shown in image below. enter image description here Below is my piece of HTML & CSS code.

<!DOCTYPE html>
<html>
    <head>
        <title>AKS NAGG</title>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            .container{
                background: aqua;
                height: 100vh;
                display: flex;
            }
            .box{
                position: relative;
                margin:20px;
                margin-top: 40px;
                float: left;
                background: yellow;
                height:400px;
                width: 400px;
                border-radius: 10px;
                flex: 1;
                overflow-y: auto;
            }
            .items{
                position: relative;
                margin: 10px;
                padding: 10px;
                border: solid;
                border-width: 2px; 
                height: 100px;
                width: 400px;
            }
            .title{
                position: relative;
                width: 50%;
                border: dotted;
                float: left;
                flex: 50%;
            }
            .image{
                position: relative;
                float: right;
                clear: both;
                border-width: 2px;
                border: solid;
            }
            /* Clearfix (clear floats) */
            .row::after {
              content: "";
              clear: both;
              display: table;
            }
        </style>
    </head>

    <body>
        
        <div class='container'>
            
            <div class='box'>
                {% for t,l,i in data %}
                    <div class='items'>
                        <div class='title'>
                            <a href="{{l}}">{{t}}<a/> 
                        </div>
                        <div class='image'>
                            <a href="{{l}}"><img src="{{i}}"></a>
                        </div>
                    </div>
                                
                {% endfor %}
                
            </div>

            <div class='box'>
                Box2 
            </div>

            <div class='box'>
                Box3
            </div>

        </div>

    </body>
</html>

Output as per my current code. The image is overlapping between two boxes.

enter image description here

Upvotes: 0

Views: 832

Answers (2)

MaxiGui
MaxiGui

Reputation: 6358

Here your images are adjusted with planty of display: flex. I added /** ADDED **/ in the snippet to show where I added your work.

DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>AKS NAGG</title>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            .container{
                background: aqua;
                height: 100vh;
                display: flex;
            }
            .box{
                position: relative;
                margin:20px;
                margin-top: 40px;
                float: left;
                background: yellow;
                height:400px;
                width: 400px;
                border-radius: 10px;
                flex: 1;
                overflow-y: auto;
            }
            .items{
                position: relative;
                margin: 10px;
                padding: 10px;
                border: solid;
                border-width: 2px; 
                height: 100px;
                width: 400px;
                display: flex; /** ADDED **/
            }
            .title{
                position: relative;
                width: 50%;
                border: dotted;
                float: left;
                flex: 1 1 auto;
            }
            .image{
                position: relative;
                float: right;
                clear: both;
                border-width: 2px;
                border: solid;
                flex: 1; /** ADDED **/
                display: flex;  /** ADDED **/
            }
            .image a{
              text-align: center;  /** ADDED **/
            }
            .image img{
              max-width: 100%;  /** ADDED **/
              max-height: 100%; /** ADDED **/
            }
            /* Clearfix (clear floats) */
            .row::after {
              content: "";
              clear: both;
              display: table;
            }
        </style>
    </head>

    <body>
        
        <div class='container'>
            
            <div class='box'>
                <!--{% for t,l,i in data %}-->
                    <div class='items'>
                        <div class='title'>
                            <a href="{{l}}">{{t}}<a/> 
                        </div>
                        <div class='image'>
                            <a href="{{l}}"><img src="https://cdn.pixabay.com/photo/2020/10/09/06/09/rabbit-5639615_960_720.jpg"></a>
                        </div>
                    </div>
                                
                <!--{% endfor %}-->
                <div class='items'>
                        <div class='title'>
                            <a href="{{l}}">{{t}}<a/> 
                        </div>
                        <div class='image'>
                            <a href="{{l}}"><img src="https://cdn.pixabay.com/photo/2020/10/09/06/09/rabbit-5639615_960_720.jpg"></a>
                        </div>
                    </div>
                    <div class='items'>
                        <div class='title'>
                            <a href="{{l}}">{{t}}<a/> 
                        </div>
                        <div class='image'>
                            <a href="{{l}}"><img src="https://cdn.pixabay.com/photo/2020/10/09/06/09/rabbit-5639615_960_720.jpg"></a>
                        </div>
                    </div>
                    
                
            </div>

            <div class='box'>
                Box2 
            </div>

            <div class='box'>
                Box3
            </div>

        </div>

    </body>
</html>

Upvotes: 1

JW Geertsma
JW Geertsma

Reputation: 877

Combining both flexbox and floats shouldn't be needed. So you can remove the floats, clears and positions from your code.

Applying display: flex; to the .items class will make it a flex container. It will give flex context to it's direct children. So you can apply some flex properties to them as well. I've added flex-grow: 1; to the title so it will take the space that it needs. The flex-shrink: 0; will make sure that your image always keeps it's size. When you apply these styles, then you'll get your desired situation.

More info about flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here's a quick example of how you could apply flexbox to your CSS:

 .items {
  display: flex;
  width: 400px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 2px solid #333;
}

.title {
  flex-grow: 1;
  border: 2px dotted #333;
}

.image {
  flex-shrink: 0;
  border: 2px solid #333;
}

Upvotes: 1

Related Questions