-1

I'm learning to develop with ruby on rails and I'm having some problems with HTML and CSS. (which I thought would be the easiest part) For some reason I cannot get the test div to do what I want.

I'm trying to make a webpage that will dynamically adjust to the size of the users device. Right now it seems like it works (the hight will change based on the size of the browser window), the problem is I cannot reposition anything inside of main_content? As you can see I tried making a div and assigning it a left position and it doesn't want to do anything... What am I doing wrong?

The following is an example. (index.html.erb)

<div id="container">
    <div id="nav_bar">
    </div>

    <div id="main_content">
        <div id="test">
            derp
        </div>
    </div>
</div>

(index.css.scss)

$font_family: "Lucida Console", Monaco, monospace;
$primary_color: #333;
$background_color: #AAAAAA;
$red: #ff0000;
$green: #00ff00;
$blue: #0000ff;

html, body {
    height: 98%;
    margin: 0;
    min-height: 98%;
    padding: 0;
    background-color: $background_color;
}

#container {
     width: 800px;
     margin: 0 auto;
     height: 100%;
     background-color: $red
}

#nav_bar{
  float: left;
  height: 50px;
  width: 800px;
  background-color: $red
}

#main_content{
  width:100%;
  height:100%;
  background-color: $blue
}

#test{
  left:1200px;
}
2
Contributors
1
Reply
16
Views
2 Years
Discussion Span
Last Post by diafol
0

I'm trying to make a webpage that will dynamically adjust to the size of the users device

In this case you want to develop a responsive site? The usual way would be to use media queries with set breakpoints.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.