CODEWITHSUNDEEP
htmlpositioning
128Gigabytes
128Gigabytes

Reputation: 193

How can I make a box of content in html?

I'm trying to learn html and I need to be able to section things into the spot they are meant to be in So like each thing will have a picture and some text

I need to make a blue box and inside it I need a image and text And next to it, the same thing. Basically if I had a way to create a new inside the real one? I guess. Im not sure. This is what I tried, and its pretty much what I want but I need the box to be solid, and maybe if someone could help me make the image and text centered on the horizontal axis that could also help.

<html>
    <head>
        <title>
            MaGa V1
        </title>
        <style type="text/css">
            .img_div {float: left; border: 1px solid white;}
        </style>
    </head>
    <body  bgcolor="#000000">
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Shadows over Innistrad/Shadows over Innistrad.png"/>
            <figcaption>
                <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
            </figcaption>
        </div>
        <div class="img_div" style="margin-right: 32px">
            <img src="./../images/Battle for Zendikar/Battle for Zendikar.png"/>
            <figcaption>
                <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
            </figcaption>
        </div>
    </body>
</html>

Upvotes: 1

Views: 61

Answers (1)

cssyphus
cssyphus

Reputation: 40106

Something like this should get you started:

body {background-color:black;}
.row{overflow:hidden;} /* Fixes float */
.img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
.img_div:not(:nth-child(2)){margin-right:10px;}
.img_div a{color:gold;}
<div class="row">
  <div class="img_div">
    <img src="http://placekitten.com/100/102" />
    <figcaption>
      <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
    </figcaption>
  </div>
  <div class="img_div">
    <img src="http://placekitten.com/102/102" />
    <figcaption>
      <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
    </figcaption>
  </div>
</div>
<!-- .row -->

The entire page might look something like this:

<html>
<head>
    <!-- Usually there is some stuff in here -- up to you -->
</head>
<body>
    <style>
        body {background-color:black;}
        .row{overflow:hidden;} /* Fixes float */
        .img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;}
        .img_div:not(:nth-child(2)){margin-right:10px;}
        .img_div a{color:gold;}
    </style>

    <div class="row">
      <div class="img_div">
        <img src="http://placekitten.com/100/102" />
        <figcaption>
          <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
        </figcaption>
      </div>
      <div class="img_div">
        <img src="http://placekitten.com/102/102" />
        <figcaption>
          <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
        </figcaption>
      </div>
    </div>
</body>
</html>

I suggest you do this tutorial, and then this one Just run through them quickly

You can only use a percentage for height if the parent container (.row in the example above) has a fixed height. The parent container's height can be in px, %, vh, em -- but it cannot be auto.

A couple of ideas to get around that are:
(1) to use padding to increase the height as desired, or
(2) to use height:30vh

vh is very similar to %, but it is measured by screen units (e.g. 30/100 of screen height instead of 30 percent of parent height) - and does not require the parent element to have a set height. (Note that there is also vw for width settings. These are also useful units for responsive settings as using vw/vh you can make sizes exactly proportionate on differently sized screens.

jsFiddle Example

Upvotes: 1

Related Questions