Photoshop Question posted in
The official user guide can be found here.

sidebar pushes the main-content down – Photoshop

I can’t seem to figure out how to float my siderbar left and my main content right.

Everything I do seems to push the main-contentclass below the sidebar. Tried putting in rows and changing the widths but but the result stays the same. Any help is really appreciated. Pretty new to this game.

CSS

.sidebar {
  width: 400px;
  float: left;
  margin-right: 48px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul .active a {
  color: #2e2e2e;
}

.main-content {
  width: 600px;
  float: right;
  margin-bottom: 48px;
}

.main-content img {
  margin-bottom: 24px;
}
<!-- PORTFOLIO AREA -->
<div class="container">
  <div class="row">
    <div class"sidebar">
      <h4>Services we offer</h4>

      <ul>
        <li class="active"><a href="#">Project Name</a></li>
        <li><a href="#">Full groom</a></li>
        <li><a href="#">Full groom</a></li>
        <li><a href="#">Full groom</a></li>
      </ul>
    </div> <!--end sidebar -->
    <div class="main-content">
      <h3>Full groom</h3>
      <p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>

      <img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
      <img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">
        
    </div> <!-- end main-content -->
  </div> <!-- end row --> 
</div> <!-- end container -->
Tags:

3

Answers


  1. 0

    See if this works for you, I have changed the width to % if you want it to be in px let me know.

    .sidebar {
  width: 35%;
  float: left;
  margin-right: 5%;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul .active a {
    color: #2e2e2e;
}

.main-content {
   width: 60%;
   float: right;
   margin-bottom: 48px;
}

.main-content img {
    margin-bottom: 24px;
}
    <!-- PORTFOLIO AREA -->
<div class="container">
   <div class="row">
     <div class="sidebar">
          <h4>Services we offer</h4>

          <ul>
            <li class="active"><a href="#">Project Name</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>

          </ul>
     </div> <!--end sidebar -->
     <div class="main-content">
      <h3>Full groom</h3>

      <p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>

      <img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
      <img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">


     </div> <!-- end main-content -->
  </div> <!-- end row --> 
</div> <!-- end container -->
    Login or Signup to reply.
  2. 0

    using flex

    .row {
    display: flex;
}

.slidebar {
    flex: 1;
}

.main-content {
    flex: 9;
    margin-left: 20px;
}
      <div class="container">
   <div class="row">
     <div class"sidebar">
          <h4>Services we offer</h4>

          <ul>
            <li class="active"><a href="#">Project Name</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>

          </ul>
     </div> <!--end sidebar -->
     <div class="main-content">
      <h3>Full groom</h3>

      <p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>

      <img src="" alt="Dog1">
      <img src="" alt="Dog2">


     </div> <!-- end main-content -->
  </div> <!-- end row --> 
</div> <!-- end container -->
    Login or Signup to reply.
  3. 0

    You don’t need floats. I would recommend using flex. You will have more control over the DOM.

    .wrapper{
display:flex;
}

.sidebar {
  width: 35%;
  padding: 10px;
  background: #ccc;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul .active a {
    color: #2e2e2e;
}

.main-content {
   width: 60%;
   padding: 10px;
   background: #ddd;
}

.main-content img {
    margin-bottom: 24px;
}
    <!-- PORTFOLIO AREA -->
<div class="container">
   <div class="row wrapper">
     <div class="sidebar">
          <h4>Services we offer</h4>

          <ul>
            <li class="active"><a href="#">Project Name</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>
            <li><a href="#">Full groom</a></li>

          </ul>
     </div> <!--end sidebar -->
     <div class="main-content">
      <h3>Full groom</h3>

      <p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>

      <img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
      <img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">


     </div> <!-- end main-content -->
  </div> <!-- end row --> 
</div> <!-- end container -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search