CODEWITHSUNDEEP
javascriptjqueryjsp
Jesse
Jesse

Reputation: 535

how to set the width of page element in jquery

there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.

Upvotes: 0

Views: 170

Answers (4)

Hirak
Hirak

Reputation: 86

Pure CSS based approach:

css:

.container {
  padding-left: 50px;
  border: 1px solid red;
}

.toolbar {
  width: 35px;
  margin-left: -50px;
  padding: 0 5px; 
  list-style-type: none;
}

.main {
  width: 100%;
}

.col {
  display: inline-block;
  vertical-align: top;
}

html:

<div class="container">
  <ul class="toolbar col">
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
  </ul>
  <div class="main col">
    <p>This is the place holder for Main Content</p>
  </div>
</div>

http://cdpn.io/hlfFG

Upvotes: 1

Freedom
Freedom

Reputation: 833

It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly. the css like bellow:

.toolbar {
    position: absolute;
    width: 35px;
}

.content { 
    position: absolute;
    left: 35px;
    right: 0px;
}

see the demo in jsFiddle.

Upvotes: 1

Sathya
Sathya

Reputation: 5308

You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.

Layout should be like this.

<div style="width: 100%">
    <div id="toolbar" style="display: inline-block; width: 35px"></div>
    <div id="main-content" style="display: inline-block"></div>
<div>

in jquery:

$("#main-content").width($(window).width() - 35);

if there is padding or margin detect them also.

Upvotes: 1

Gung Foo
Gung Foo

Reputation: 13568

Sounds like this can easily be done with CSS.

#main-content {
  width: 100%;
  margin-right: 35px;
}

Upvotes: 0

Related Questions