CODEWITHSUNDEEP
htmlcss
Ile Popivanov
Ile Popivanov

Reputation: 95

Two inline images. CSS / HTML

I am creating website for my school (its something like match) but I am stuck on one thing :/ . I am trying to inline 2 images. One is for decoration and secound is like board for text. And its working but border is not comming down O.o and its under a div main (glavendrzac on my language) . Margin is working but border not. Its only "bordering" around logo :/ (See image below.)

http://prntscr.com/b0qtw7

enter image description here

<html>
<head>
    <meta charset="UTF-8"/>
    <title>ООУ "Јосип Броз Тито"</title>
    <link rel="stylesheet" type="text/css" href="stilovi.css">
</head>
<body>
<div id = "glavendrzac">

    <div class = "logopozicija">
        <img src="sliki/logo.png"/>
    </div>
    <div id = "sliki">

        <div class = "profesor">
            <img src="sliki/profesor.png" width="270px"; height="450px";/>
        </div>
        <div id = "tabla">
            <div class = "tablatekst">
                test
            </div>
        </div>
    </div>
</div>

<?php
//
?>
</body>
</html>

And this is CSS code

body
{
    margin: 10px;
}

#glavendrzac
{
    margin-left: 200px;
    margin-right: 200px;
    border: 2px solid black;
    border-radius: 8px;
}

#sliki
{
}

.profesor
{
    float:left;
}

#tabla
{
    margin-top:50px;
    float:right;
    margin-left:30px;
    border: 0px solid black;
    border-radius:20px;
    width: 800px;
    background: url("sliki/tabla.png");
    background-size: cover;
}

.tablatekst
{
    margin-top: 30px;
    margin-left: 40px;
    margin-bottom: 30px;
    margin-right: 40px;
}

Can someone help me :) IDK whats wrong.

Upvotes: 2

Views: 98

Answers (1)

Marc Audet
Marc Audet

Reputation: 46825

If you add overflow: auto to the #glavendrzac then the floats will be contained within the containing div, which I think is what you need.

You will need to think about the widths of the various child elements to make sure that the professor image and text box fit within the parent container.

The CSS concept involved here is known as a block formatting context.

Reference: https://www.w3.org/TR/CSS2/visuren.html#block-formatting

#glavendrzac {
  margin-left: 200px;
  margin-right: 200px;
  border: 2px solid black;
  border-radius: 8px;
  overflow: auto;
}
#sliki {} 
.profesor {
  float: left;
}
#tabla {
  margin-top: 50px;
  float: right;
  margin-left: 30px;
  border: 1px solid black;
  border-radius: 20px;
}
.tablatekst {
  margin-top: 30px;
  margin-left: 40px;
  margin-bottom: 30px;
  margin-right: 40px;
}
<div id="glavendrzac">
  <div class="logopozicija">
    <img src="http://placehold.it/50x50" />
  </div>
  <div id="sliki">

    <div class="profesor">
      <img src="http://placehold.it/100x450" width="100px" ; height="450px" ;/>
    </div>
    <div id="tabla">
      <div class="tablatekst">
        test (this needs some work)
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions