CSS: is it possible to set a DIV width to 100% minus 100px?

Posted on 2007-11-28
Last Modified: 2008-02-01
Hi All,

Title say it all really.

is it possible to set a DIV width to 100% minus 100px, using CSS?

Many thanks
Question by:detox1978
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +1
LVL 18

Expert Comment

ID: 20365850
Is the 100px going to be used for anything?

Author Comment

ID: 20365870
I'm creating a block of colour for decoration.  Here's what i have (the width doesn't work).

#extraDiv1 {
      width: 100% - 100px;
LVL 16

Expert Comment

ID: 20365928
You just need to set the margin-right and margin-left to 50px.  Then you div will be 100% - 100px
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

LVL 13

Expert Comment

ID: 20365936
Create another div around it and add padding to that div. It depends a little where you want to place the inner div, but this is a possibility:
div.container { padding-right: 100px; }

Open in new window

LVL 16

Accepted Solution

rbudj earned 200 total points
ID: 20365955
oh, for color, make a div set to 100% , then put another div inside that div following my previous instructions.  Make the background color of the container div whatever color you want and it will show through where the right and left margins are 50px
LVL 18

Assisted Solution

Eternal_Student earned 50 total points
ID: 20365994
Yes there are numerous ways to do this.

<div style="width:100%;">
      <div style="float:right; background-color:#FF0000; width:100px;">&nbsp;</div>

Author Comment

ID: 20366017
thanks.  i nested a span inside.

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question