1

I'm working on a blog section of my homepage and having issues with the formatting. I want to display two blocks in the same row(side by side) and I want that row to stay in the normal flow of the page. To do this I have both of the boxes in a container box. Relevant code:

#container1 {
  display: block;
  position: static;
  margin-bottom: 20px;
  border-width: 1px;
  border-style: solid;
}
#pgPhoto {
  padding: 10px;
  display: inline-block;
  width: 20%;
  border-width: 10px;
  border-style: outset;
}
#statement {
  padding-left: 30px;
  padding-right: 30px;
  display: inline-block;
  float: right;
  border-width: 10px;
  border-style: outset;
}
#post1 {
  display: block;
  border-width: 10px;
  border-style: outset;
}
<div id="container1">
  <div id="pgPhoto">
    <!--this is just a box right now-->
  </div>

  <div id="statement">

    <p1>
      <em class="bold">Statement:</em> Some Text
    </p1>

  </div>
</div>

<div id="post1">

The post1 block overlaps the boxes above when they're floated. From what I understand this would be normal because they're taken out of the normal flow and the way around this is to make a container box that includes both of the side-by-side boxes. But it seems like floating the boxes inside of the container block also takes the container block out of the flow? Also is "display: inline-block;" supposed to make blocks display side-by-side? Because I can't get that to work properly either.

j08691
  • 204,283
  • 31
  • 260
  • 272
Josh Wiens
  • 135
  • 6
  • It doesn't overlap though. – m4n0 Jul 22 '15 at 20:28
  • I'd post a picture of what I can see but my rep isn't high enough on this site. In the code I posted it has the "statement" block floated right and that make my "post1" border shoot up into the middle of the container box. If I don't float though, it doesn't overlap but then I can't get the boxes to display side by side. – Josh Wiens Jul 22 '15 at 20:35
  • You want the `post1` to be inside the container and right aligned with other two boxes? Post the image URL – m4n0 Jul 22 '15 at 20:37
  • You need to [clear your floats](http://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float) and [here is why](http://alistapart.com/article/css-floats-101#section6) – Turnip Jul 22 '15 at 20:40
  • Here's the url to a photo of what I'm seeing. https://www.dropbox.com/s/j46bw3pwry2318t/Screenshot%20from%202015-07-22%2014%3A45%3A25.png?dl=0 Ill be playing with Clear property next to try and solve, Thanks for the suggestion. – Josh Wiens Jul 22 '15 at 20:53
  • I've solved the overlapping part of my problem. Using the "overflow" property in the container element fixed it. But now I can't figure out how to get the contained elements to display side-by-side. I've tried several different combinations of float and clear properties and it just doesn't want to do it. Is the display property value "inline-block" not meant to accomplish this sort of task? No matter what I do it just displays the first element on top of the second as usual. – Josh Wiens Jul 22 '15 at 23:31

0 Answers0