Resizing images in 3 divs within a container

Question

I am working on this webpage for a homework/lab assignment and I came across this issue.

I want my 3 div's inside a container div to be spaced and ordered correctly. I want the left and right divs to be smaller in width but the same height as the middle div. The middle div is wider in width than the left and right divs but the same height. The left and right divs have images inside. So essentially, I want ads to the sides of the middle div and the middle div is the main content.

The problem is that the images (which are very big screenshots) aren't aligning and fitting within the left and right divs as ads. The images are aligned on top of each other rather than at the left and right sides.

How can I fix this so that the webpage is responsive and placed to the desired locations? CSS solution preferred.

Link to the webpage in progress: http://techteach.us/Web2020/ZWeiJian/WCP/Lab_1.html

#cntnt {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    background-color: aqua;
}

#leftSideBar {
    background-color: red;
    max-width: 33.33%;
    height: auto;
    position: static;
    float: left;
    margin: auto;
}

#rightSideBar {
    background-color: purple;
    max-width: 33.33%;
    height: auto;
    position: static;
    float: right;
    margin: auto;
}

#midContent {
    display: block;
    width: 33.33%;
    height: auto;
    position: static;
    float: none;
    margin: auto;
}

<div id="cntnt">
    <div id="leftSideBar">
        <!--Techteach.us/Mrs. Ramirez's website-->
        <img
            src="../Visual Content/Teachteach.us.png"
            alt="An ad of Techteach.us, the parent site of all Web2020 sites."
            id="leftPic"
        />
    </div>

    <div id="midContent">
        <p>
            Currently under construction. Please be patient for the final
            product. Thank you.
        </p>
    </div>

    <div id="rightSideBar">
        <!--ITHS' website-->
        <img
            src="../Visual Content/ITHS.net.png"
            alt="An ad of Informational Technology High School, a High School."
            id="rightPic"
        />
    </div>
    <br style="clear: left;" />
</div>

<br />

My web page doesn't though. The images go past the divs and go on top of each other. — Aspiring_Coder, Sep 21 '19 at 20:29
Your images are too large. Try giving them a smaller size, e.g. `width: 200px` — symlink, Sep 21 '19 at 20:32
It works but I want the webpage to be responsive. So I want the images to enlarge or shrink when the user resizes their window or uses a mobile device. — Aspiring_Coder, Sep 21 '19 at 20:48

score 0 · Accepted Answer · answered Sep 21 '19 at 21:31

Try removing the margin: auto from your CSS. Then add width = "100%" height = "100%" after the <img and before src. This way, we tell the img to "fit" its height and width on it's container.

I modify your code:

HTML

<div id="cntnt">
  <div id="leftSideBar">
    <!--Techteach.us/Mrs. Ramirez's website-->
    <img width="100%" height="100%" src="http://techteach.us/Web2020/ZWeiJian/Visual%20Content/Teachteach.us.png" alt="An ad of Techteach.us, the parent site of all Web2020 sites." id="leftPic">
  </div>

  <div id="midContent">
    <img width="100%" height="100%" src="http://ysgolllandinamschool.co.uk/Images/under_construction.jpg" alt="An ad of Informational Technology High School, a High School." id="rightPic">

  </div>

  <div id="rightSideBar">
    <!--ITHS' website-->
    <img width="100%" height="100%" src="http://techteach.us/Web2020/ZWeiJian/Visual%20Content/ITHS.net.png" alt="An ad of Informational Technology High School, a High School." id="rightPic">
  </div>
  <br style="clear: left;" />
</div>

<br>

CSS

/**page contents**/
#cntnt {
max-width: 100%;
height: 100%;
/* margin: 0 0; */
display: flex;
background-color: aqua;
}

#leftSideBar {
background-color: red;
max-width: 15%;
height: auto;
position: static;
float: left;
/* margin: auto; */
}

#rightSideBar {
background-color: purple;
max-width: 15%;
height: auto;
position: static;
float: right;
/* margin: auto; */
}

#midContent {
display: block;
width: 70%;
height: auto;
position: static;
float: none;
/* margin: auto; */
}

Thank you for your response. Your answer comes close to my desired webpage look. The issue to your solution though is that the 3 divs all float left inside the "cntnt" div instead of 3 divs fixed to their position on left, middle, and right. Also, the middle div is most likely going to be filled with text. Not an image. — Aspiring_Coder, Sep 21 '19 at 21:51
Actually, `float` will be ignored when you use `flex` as a display property. Have a good read in this answer: [float does not work in a flex container](https://stackoverflow.com/a/39194800/7566345) Good luck coding! — Curbside Coder, Sep 21 '19 at 22:00

score 0 · Answer 2 · answered Sep 22 '19 at 06:43

0

Set your width and height to default, and remove the margin from your code.

answered Sep 22 '19 at 06:43

Gift

1

Resizing images in 3 divs within a container

2 Answers2