CODEWITHSUNDEEP
htmlcss
clarkk
clarkk

Reputation: 27689

Element with width 100 percent overflows parent

I have monkeyed around with this simple (!) html code for at couple of hours now.. But can't %#!¤ make it work as I want it to..

url

http://www.bluemachines.dk/html_test/

problem

If you look at the link you can see a grey div aprox 1000px in width.. Thats the width of the page..

In the div there is a table with 3 columns with headings: Dato, Bilagsnr, Bilag

In the last column "Bilag" there are multiple elements including an image which causes the problem. The width of the element is set to 100% but somehow it "overflows" the parents width

The first two columns "Dato" and "Bilagsnr" are mashed up as long as the image is shown..

If you right click on the image element <div id="e9900" ... and inspect the element and set display:none everything falls into place.. e9900 also has overflow:hidden, and the image itself is draggable in the parent element show large images fit in.. This is how it should look like, but as soon as the image element is shown the width is messed up

Can't really get whats going on, because the width of the image element is set to width:100%.. Yes you could set the width of the image to the exact width, but thats not what I want.. The design must not be static and locked

Upvotes: 1

Views: 607

Answers (2)

Muhammad Raihan Muhaimin
Muhammad Raihan Muhaimin

Reputation: 5729

Add this style property into table tag style="table-layout: fixed;" 

.......
<div id="header_module">
  <table class="list_header" data-table="enclosure" >
    colgroup> … </colgroup>
......

The middle line will become like this

<table class="list_header" data-table="enclosure" style="table-layout: fixed;">

Source : http://www.w3schools.com/CSSref/pr_tab_table-layout.asp

Upvotes: 2

Jeroen W
Jeroen W

Reputation: 872

Give, in this case, both div#e9965 and img#e9966 a width of 100%.

I'm not exactly sure what you want to do with the image ie. how it's supposed to be positioned in the parent, but this fixes at least the overflow part and fixes the "Dato" and "Bilagsnr" appearance at the left top.

Upvotes: 0

Related Questions