Html Question posted in
Some basic documentation can be found here.

Need help dividing a page into two using HTML and CSS ? – left portion of 40% with an image and right portion of 60% with texts

Similar to the attached example, I’m trying to divide a container into two – left side to be of, say, 40% and the right side to be of 60%. in the left side of 40%, I need to upload an image and the image needs to be fit into the 40% without distorting the image (despite whatever sizes of the image is). And the right side (60%) to be entered with text. What I need to achieve is similar to what is given in the attached image.

Please assist. Thank you
enter image description here

I tried using options such as table in HTML. But I do not want lines and borders to be appeared. Then I tried creating a parent Div and then two child div’s within that parent Div. But the image doesn’t get fit to the left portion. It goes completely out of the size

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the response. kindly check if the codes should be as follows after following your answer;

    .container{
    display:flex;
}
.image-container{
    flex: 40%;
    object-fit: cover;
}
.text-container{
    flex: 60%;
}
    <div class="container">
        <div class="image-container"><img src="Image.jpg" alt="AI"></div>
        <div class="text-container">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit obcaecati nulla qui, dolorem aspernatur, aliquam cupiditate ab repudiandae at harum beatae sunt dicta accusamus ad eligendi. Facere neque modi quidem.</div>
    </div>
      
</body>
</html>


  2. 0

    HTML Structure: The main container (.container) houses two child divs: one for the image (.image-container) and one for the text (.text-container).
    CSS Flexbox:
    The .container uses display: flex; to establish a flex container, making its children (the image and text containers) flex items.
    .image-container and .text-container use the flex property to specify the proportion of space they should take up (40% and 60%, respectively).
    The object-fit: cover; property ensures that the image covers its container without being distorted, cropping the excess parts if necessary.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search