user8364783
user8364783

Reputation:

How do I Limit Div size?

I'm trying to make my div stay around 70% to the left but my width is too big. If I do max-width: 500px the div goes to the center.

In green you can see the size of the div

How can I reduce the width of the div and keep the div in that position? Also I wanted to make the "$user" go the right of the image.

CSS

.post {
width: 70%;
position:relative;
margin: 0 auto;    
}

HTML

<div class="post">                    
                 <h1><?php echo $title; ?></h1>                
                 <img src="data:image/gif;base64,<?php echo $image;?>" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link"><?php echo $likes;?> likes</button>
                     <button type="button" class="btn btn-link"><?php echo $comments; ?> comments</button>
                     <button type="button" class="btn btn-link"><?php echo $user; ?></button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>

Upvotes: 0

Views: 1954

Answers (1)

Don
Don

Reputation: 4157

margin: auto automatically gives half of the remaining space to the left and right margins thus centering it. If you want the div on the left side of the screen just remove the margin you're giving it.

EDIT

After reading in the comments it seems like what you want is a 2-column type system. In order to position the post in the way you want you should use a global container, and then position that and have posts take up a fraction of that space:

.container{
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
}
.post-container{
  float:left;
  width: 70%;
}
.other-container{
  width: 29%;
  float: right;
  background: pink;
}
.post {
  display: inline-block;
width: 100%;
background: lightblue;
}

HTML:

<div class="container">
<div class="post-container">

  <div class="post">                    
                 <h1>GIF</h1>                
                 <img src="" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link">4 likes</button>
                     <button type="button" class="btn btn-link">5 comments</button>
                     <button type="button" class="btn btn-link">User</button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>
  <div class="post">                    
                 <h1>GIF</h1>                
                 <img src="" >
                 <div class="postRef" >
                     <button type="button" class="btn btn-link">4 likes</button>
                     <button type="button" class="btn btn-link">5 comments</button>
                     <button type="button" class="btn btn-link">User</button>
                 </div>
                 <div class="postBtns">
                     <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-thumbs-down"></span></button>
                 </div>
             </div>
</div>

<div class="other-container">
Other stuff!!!!<br><br><br><br><br><br><br><br><br><br><br><br>and others.
</div>
</div>
             </div>

https://jsfiddle.net/1g57b5o3/2/

Upvotes: 1

Related Questions