-1

I'm trying to create a html web page that has a responsive sidebar menu and main div at the center. but I'm having a trouble doing it.. I uploaded a image so that you will relate on what I'm trying to ask.

here's the link for the image..

http://i61.tinypic.com/2lca73q.png

please help me thank you.. so much.

What i have so far is:

CSS

*
{
padding:0;
margin:0;
font-family: helvetica;
}

html
{
overflow-y:scroll;
}

body
{
width:100%;
height:100%;
}

.main
 {
width:100%;
height:100%;
}

.sidebar
{
float:left;
width:8%;
background:#111;
display: relative;
position:absolute;
height:100%;
max-height: 100%;
}


.space
{
margin-top:125%;
}

#add
{   
position: relative;
width:55%;
margin-left:25%;
display: block;
color:#fff;
text-decoration:none;
padding:10px 10px 10px 0;
}


li
{
list-style: none;
text-decoration:none;
padding:3px;
}

#view
{
width:55%;
margin-left:23%;
display: block;
position: relative;
padding:10px 10px 10px 0;
}

li:hover
{
background:#333;
}

.view:hover
{
b   ackground:#333;
}

#setting
{
width:76%;
margin-left:13%;
position: relative;
display: block;
padding:5px 5px 5px 0;
}
#logout
{
width:46%;
margin-left:28%;
display: block;
position:relative;
padding:10px 10px 10px 0;
}

h2
{
margin:auto;
position:absolute;
margin-left:40%;
font-weight:normal;
    color: #666;
    font-size:18px;
margin-top:2%;
display: block;
 }

.main_box
{
display:inline-block;
background:#099;
height:300px;
width:300px;
}

HTML

<body>
<div class = "main">
<div class = "sidebar">
    <ul>
        <div class = "space"></div>
        <li><img src = "images/add.png" id = "add"></a><p class = "txt_add"></p></li>
        <li><img src = "images/view.png" id = "view"><p class = "txt_view"></p></li>
        <li><img src = "images/setting.png" id = "setting"><p class = "txt_setting">    </p></li>
        <li><img src = "images/logout.png" id = "logout"><p class = "txt_logout"></p>    </li>
    </ul>
</div>
<h2>ONLINE SPOT VERIFICATION</h2>

<div class = "main_box">

</div>
</div>

eiv
  • 35
  • 1
  • 1
  • 4

2 Answers2

1
html, body {
    height: 100%;
}

demo

falcon
  • 357
  • 2
  • 5
  • 21
  • Is that what you are looking for? – falcon May 05 '14 at 02:35
  • yes @user3424754. your answer is great! thank you so much.. :)) hmm how about the responsive image? – eiv May 05 '14 at 02:58
  • what's the use of
    on your fiddle sample?     – eiv May 05 '14 at 03:00
  • You're welcome. here is the answer on your second question - http://stackoverflow.com/questions/12871710/why-clear-both-css . Responsive image? You mean responsive sidebar icons, background, or what? – falcon May 05 '14 at 03:13
  • responsive sidebar icons :) – eiv May 05 '14 at 04:11
  • yes @user3424754 what I'm trying to say is responsive sidebar icons. thanks :) – eiv May 05 '14 at 06:24
  • something like this, but it really depends on your needs, which i don't know http://jsfiddle.net/KMFHu/3/ – falcon May 05 '14 at 06:55
  • Hi @user3424754 im sorry if im being too questionable but i'd just really need i help i think you are the best person to consult to. can you pls check this one? http://stackoverflow.com/questions/23483911/responsive-css-to-fit-in-any-browser-and-resolution Thank you.. – eiv May 06 '14 at 00:09
0

I do not really know what your question is but I guess you want a full height div?

This is a way to do it in css3.

height: 100vh;

I also think you want to float your .main_box to the left so it will be next to your sidebar.

JoeriSmits
  • 253
  • 3
  • 18