CODEWITHSUNDEEP
htmlcss
Adeel Hussain
Adeel Hussain

Reputation: 53

Trying to align image on the right of text using HTML & CSS

I am trying to align my image next to the text using HTML, so far I have tried adding float:right but it just seems to push the div down. I have also tried adding overflow:hidden but it does not seem to work.

I am using media queries to make this website responsive, and this is where I am having issues with moving the image to the right of the text,

I hope you can help.

<section id="section_about" class="grid">
            <h2 class="content-title">
                Our Story
            </h2>
        <div class="content-wrap about_content">
            <p>
                The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
                confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
                on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
                eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
                brandishing a sword
                <br><br>
                Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
                touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
                sword
            </p>
            
        </div>

        <div class="about_img_container">
            <img src="./img/about_img.jpg" class="about_img">
        </div>
        
    </section>

CSS:

 .content-title {

font-family: 'Playball', sans-serif;
color: #C59D5F;
font-size: 2.5em;
padding: 5px 0;
margin-top: 10px;
 }

 .content-wrap p {

padding-left: 20px;
line-height: 30px;
 }

 .about_img{

padding: 0 10px;
 }

 @media(min-width: 1024px) {
.about_content {

    width: 50%;
    background: pink;
}

.about_img_container{
   background: red;
   margin: 150px;
   float: right;
   overflow: hidden;
}
 }

enter image description here

Upvotes: 1

Views: 2839

Answers (4)

eric
eric

Reputation: 1

HTML

<div class="container">
    <div class="content-wrap about_content">
        <p>
            Pls text here
        </p>
    </div>

    <div class="about">
        <p>Pls text here</p>
    </div>
</div>

CSS

.container {
    display: flex;
    justify-content: space-around;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67798

Just restrict the size of the image container by applying an appropriate width to it in your CSS rule, and move it above the DIV that contains the text so the text can float next to and under the image.

Upvotes: 0

user14585244
user14585244

Reputation:

A more modern way of doing this would be with flexbox:

HTML

<div class="flex-container">
    <div class="content-wrap about_content">
        <p>
            Your Text here
        </p>
    </div>

    <div class="about_img_container">
        <p>sodfosdf</p>
    </div>
</div>

CSS

.flex-container {
    display: flex;
    justify-content: space-around;
}

The justify-content property defines how the two elements are displayed next to each other or under each other.

Upvotes: 2

Gabriel
Gabriel

Reputation: 1

First you will need to remove h2 from the section:

    <h2 class="content-title">
           Our Story
    </h2>

<section id="section_about" class="grid">
        <div class="content-wrap about_content">
            <p>
                The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
                confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
                on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
                eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
                brandishing a sword
                <br><br>
                Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
                touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
                sword
            </p>
            
        </div>

        <div class="about_img_container">
            <img src="./img/about_img.jpg" class="about_img">
        </div>
        
    </section>

Then give the section a display: flex.

#section_about {
    display: flex;
    flex-direction: row;
}

Upvotes: 0

Related Questions