CODEWITHSUNDEEP
htmlcssweb
Umz15
Umz15

Reputation: 61

How to remove white space between two elements in my div (see image)?

I have been trying to fit in 3 different elements inside a div and have ran into problems. I cannot seem to get rid of the huge white space between my header and the paragraph. I have used a document on margin and padding to solve this issue, although I have made some progress there is still some unsolved problems.

enter image description here

My attempt:

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="style2.css"></header>
    <body class="about">    
        <div class="content-wrapper">

            <img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">

            <h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>

            <p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            </p>
        </div>


    </body>
</html>

CSS:

/*About page content*/
.content-wrapper{
  display: inline-block;
  width: 1000px;
  padding:0px;
  margin-top: 50px;
  margin-right: 100px;
  margin-left: 50px;
  position: fixed;
  border:2px solid black;
}

.text-header-content{
  display: inline;
  width: 400px;
  float: right;
  padding:0px;
  margin-top: 0px;
}

.text-content{
  display: inline;
  width: 400px;
  padding:0px;
  color: black;
  float: right;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

Upvotes: 0

Views: 6201

Answers (3)

thirdender
thirdender

Reputation: 3951

You will have to float the IMG to the left. What I would do is put the text inside of another element and set overflow: hidden; on that element.

jsFiddle Demo

HTML:

    <div class="content-wrapper">

        <img class="hk-img" src="hksquared.jpg" height= "400px" width="400px">

        <div class="text">

            <h1 class="text-header-content">Web Development. Software Development. E-commerce. Photograpy.</h1>

            <p class="text-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.<br><br><br>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

        </div>

    </div>

CSS:

.content-wrapper {
  /* Simple float containment: http://colinaarts.com/articles/float-containment/ */
  overflow: hidden;
  /* Your styles */
  display: inline-block;
  width: 1000px;
  margin: 50px 100px 0 50px;
  border: 2px solid black; }
  .content-wrapper > .hk-img {
    float: left;
    /* Adjust following margin to taste */
    margin-right: 2em; }
  .content-wrapper > .text {
    /* The following line prevents the text from wrapping under the image,
       creating a column effect. */
    overflow: hidden;
    color: black; }
    .content-wrapper > .text .text-header-content {
      margin-top: 0; }

Upvotes: 0

Rameez
Rameez

Reputation: 1712

Add style to your image:

float:left;

see here

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Issue:

It is because, your one div is set to float: right; and the other is set to float: left. This will always cause this issue.

Solution:

  1. Either you set some margin-right for the div with float: right property, so that it will come a bit closer. But hey, you can try to give some margin to the one with float: left too. This way, both will come closer to each other.

  2. You remove the property float: right from the div. And for this you need to try this:

    img {
    float: left;
    }

    img, p, h1 {
    display: inline-block;
    }

This method won't need any margin value to be set, to come closer. Instead it will not even make the text float right, it will just display it in the front of the image. Without that white-space. Also, you can still try to provide some margins to make it look cute!

Upvotes: 0

Related Questions