1

I'm learning css right now so you may know what kind of problems are trying to blow my mind... hahaha

Okey, I'm trying to separate my web in two divs like this:

enter image description here

and the intention is that the right-side realize there is something at his left.

Left Side: 

.left-side {
  background: url('../img/mesh.png') #333;
  position: relative; 
  top: 0px;
  margin-left:0px;
  width: 100px;
  height: 100%;
}

Right-side: Here's the problem

.right-side {
  position: relative;
  margin-left: 100px;
  top: 0px;
  float: left; /* Trying to detect something at my left */
  height: 100%;
  width: 100%;
}

Both have relative positions because I read they should, maybe I'm wrong...

Just for giving you some context, on the left-side would be a navigation bar and on the right side would be all the grid and main content.

I'm using bootstrap framework for creating the grid on the right-side but the problem is that all the div's do not take their parent as a reference.

<html>
<head>
   .....
</head>
<body>
   <div class="left-side">
      <!-- Navbar -->
   </div>
   <div class ="right-side">
      <div class ="container-fluid">
         <!-- etc -->
      </div>
   </div>
</body>
</html>

Thanks for reading this. I would try to fix this by my own, some help would be well recieved

Improve this question
4
  • Having top: 0px; on a relatively-positioned element doesn’t do anything. Did you mean to maybe make them both position: absolute;? (The left bar would have to have a fixed [as in something that can be specified as one number with one unit] width for that to work, though.) Commented Mar 28, 2013 at 19:12
  • Thanks, the absolute is working on the left-side but what about the right one, I gave it a left margin but I think that there is another better way.. Commented Mar 28, 2013 at 19:16
  • A left margin is perfectly fine too, but don’t use it with width: 100%. (I would personally set position: absolute; left: <whatever>; top: 0; right: 0;, though.) But if Bootstrap provides ways to do this (apparently it does) then go with those instead. Commented Mar 28, 2013 at 19:16
  • Thanks :) Constructive and straight to the point, thanks again for your patience. Commented Mar 28, 2013 at 19:23

3 Answers 3

Reset to default
3

You should use what Bootstrap gives you, which is span classes. What about something like this?

<html>
<head>
   .....
</head>
<body>
   <div class="row-fluid">
       <div class="span3">
          <!-- left side -->
       </div>
       <div class="span9">
          <!-- right side -->
       </div>
    </div>
</body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks, maybe I'm wrong but the span9 will not be limiting the pixels? Sorry I don't know how to explain myself well(not in english). I mean I want to give right-side everything but what left-side takes.
Yes, that is how it will work when you use row-fluid. Try it and see if it's what you want.
Thanks, it's working haha. I change the first span for span1 and the second for span11. It is right?. Apart from that this is a big big keep it simple stupid! :)
Yes, you can change the size of the span to whatever you want, as long as they add up to 12.
Done :) Will not happen again
1

You probably don't need position relative. Usually the best use for that is when you need to position something absolutely inside it - that is, relative to the box you're calling relative.

To use the floats like this, you need to set the widths, and they can't be set to 100%. Doing that means they're taking up as much room as their container, which in this case looks like the whole screen. That means the right div is going to wrap below the left one, since it can't fit next to it. Start out by setting the left to width 100px and the right to width 500px, or something like that, and play with it from there.

And make the left float:left as was pointed out.

Improve this answer

Comments

0

Add float: left; to left-side. So, thet element goes to left.

Improve this answer

1 Comment

This breaks with width: 100%. It also won’t span a correct width without it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.