473,387 Members | 1,664 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

DIV with width set to 100% overlaps wrapper, CSS Question?

Expand|Select|Wrap|Line Numbers
  1.  
  2. .wrapper
  3. {
    margin: 5px 5px 5px 5px;
    padding: 2px 2px 2px 2px;
    width: 220px;
    height: 305px;
    background-color: rgb(85,85,85);
    }
  4.  
  5. .title
  6. {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    background-color: rgb(136,136,136);
    width: 100%;
    }              
  7.  
Expand|Select|Wrap|Line Numbers
  1. <div class="wrapper">
    <div class="title">
    Enter you login details here:
    </div>
    </div>
  2.  


As you can see the title div it outside it's wrapper. i've looked up a bit about inheritance but i'm a bit of a layman.
Nov 16 '10 #1
1 2165
JKing
1,206 Expert 1GB
It's because of the padding you have set on your title class particularly the padding-left. This has to do with the way the box model works. It is adding the extra 10px of padding on top of setting its width equal to the width of the parent div.

Divs are block elements and therefore by default take up all the available width with a line break before and after them. Remove width:100% from your title class and it should perform as intended.
Nov 17 '10 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Chris Leipold | last post by:
Hi, I have a problem with an element of 100% width and a left paddig. The effect I try to achieve is easy, take a look at: http://swing-tanzen-verboten.de/test.html My Problem is, the width...
2
by: steventhrasher42 | last post by:
I can't figure out a way to possibly make this work in HTML. I have a table embedded in another table, with the inner table spanning a few columns. I would like for the outer table to span the...
3
by: Robert | last post by:
Hi, Could anyone explain the behaviour of my simple table at http://www.xs4all.nl/~rvanloen/example/table1/table.html The css is located at:...
2
by: vidalsasoon | last post by:
I'm using a DLL that is a managed wrapper of a C++ dll. I have the source code to this wrapper. I think I found a bug so I want to snoop around the c++ code to see what is happening. In the...
2
by: Logan | last post by:
i've added a data grid to an aspx form, & i've noticed that the width of the grid is fixed. I want to be able to set the width to fit the entire width of the browser. Such as done in classic...
4
by: Hiwj | last post by:
I am having a problem with a cell in a table in ASP.NET which used to work OK in classic ASP. I have one cell in a row where the width should be 22 pixels and the other cell should take up the...
3
by: VK | last post by:
Stock in one strange problem equal to both FF and IE. With form width set to 100% the right border of form goes hell knows where behind the screen. Is there a way to tell reliably to form to...
0
by: ChitownE | last post by:
Hello, I'm having problems closing the gap on a page in IE6. I want the table on the right to fill 100% of the right_panel container. In IE6, there is a 2px gap on the left. When I try to set...
0
by: mephraim | last post by:
I have a page at (view in IE): http://rmc2.dev.leepfrog.com/ie_fix_me/index.html that has an image floated right outside of a main content div that looks like: <img src="blah" style="float:...
4
by: lilOlMe | last post by:
Hi there! I'm developing a "scrollable table". At first I started using CSS. It worked pretty well until I found a bug that happens when placing this table into a tabbing control... So I...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.