CODEWITHSUNDEEP
csshtml
davvv
davvv

Reputation: 792

Issue where I can't float a DIV next to another DIV

I am struggling with getting a div to sit next to another div, but I can't seem to figure it out.

image of css issue where text does not float

I have a picture projectLarge, and a div sideLargePicArea, (which needs to sit next to the image) but everything I have tried has not worked. I thought display: inline; or float: left; would do the trick, also placing a float: left; on the projectLarge div, but no change.

HTML:

 <section class="projectLarge">
        <img src="/images/common/1.jpg" width="100%" height="100%" />
             <article class="sideLargePicArea">
                <span class="smaller noTop">SMALLER</span>
                "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
                <span class="smaller">SMALLER</span>
                "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
             </article> 
    </section>

CSS:

/* The page sits inside a #container div */

#container {
    display: block; 
    max-width: 1320px;
    padding-left: 3vw;
}

/* */

.projectLarge {
    max-width: 1035px;
    margin: 0 5% 5% -3vw;
    float: left;    
}

.sideLargePic {
    float: left;
}

.smaller {
    font-size: 13px;
    margin: 5% 0 2% 0;
}

Upvotes: 0

Views: 41

Answers (2)

Josh Coast
Josh Coast

Reputation: 660

The image is taking up 100% of the containers space (.projectLarge), pushing the .sideLargePicArea down below it. To get them to sit side by side, you'll need to give them each a width that will fit side by side. I'd say use a percentage so when the container size changes, they'll always sit side by side. The image and the text container (.sideLargePicArea) percentage should add up to 100% or less.

Also, use padding on the text container (.sideLargePicArea) so the margins don't push the containers around. On the same note, add box-sizing: border-box; to all the elements. If you're unfamiliar with box-sizing, have a look at this post, it'll save you so much grief when making responsive layouts https://css-tricks.com/box-sizing/. 

* {
  box-sizing: border-box;
}
.projectLarge img {
  float: left;
  width: 50%;
  padding 100px;
}
.sideLargePicArea {
  font-size: 13px;
  padding: 20px;
  float: right;
  width: 50%;
}
<section class="projectLarge">
  <img src="http://placehold.it/350x350" />
  <article class="sideLargePicArea">
    <span class="smaller noTop">SMALLER</span>
    "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
    <span class="smaller">SMALLER</span>
    "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
  </article>
</section>

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

So I made this easy for me but you can do some customization. You can float the direct children inside of the section all to the left. Additionally, the img and the article must have room in the section to float, otherwise the article will drop below the img. This is why I set both to width:40%;. You may or may not choose to do this.

.projectLarge > *{
  float:left;
  border:1px solid red;
  width:40%;
}
 <section class="projectLarge">
   <img src="/images/common/1.jpg" width="100%" height="100%" />
   <article class="sideLargePicArea">
     <span class="smaller noTop">SMALLER</span>
     "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
     <span class="smaller">SMALLER</span>
     "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
   </article> 
</section>

Upvotes: 0

Related Questions