div width not working

V 0

or not as expected. if you look at this site[^] (dutch website) I would like to have the tab content (made in JQuery) with a margin of around 25 pixels on either side (left and right) of the page, regardless of the content. (so it moves with the size of the browser). For now, I did a dirty fix by setting the min-width to a certain amount of pixels, which is not what I want, but otherwise the width would adapt to the content of the tab. For the tab "programma" eg. only half the width of the page would be filled, the rest is the background image. No matter what I did in the css, nothing worked. (although it looks trivial) So what do I need to do to * remove the fixed pixel width * make the tab content as wide as the page (with a small offset of say 25 pixels left and right. It COULD be the JQuery css that's messing things up, but I'm not a css/jquery wiz unfortunately. the short HTML:

title, social media stuff, ...

			*   [home](#tab-home)
			*   [club](#tab-club)
			*   [programma](#tab-programma)
			*   [inschrijvingen](#tab-inschrijvingen)
			*   [gedragscode](#tab-gedragscode)
			*   [informatie](#tab-info)
			*   [kalender](#tab-kalender)
			*   [FAQ](#tab-faq)
			*   [contact](#tab-contact)

footer contents

the css:

div.header { display: inline-block; }
div.main { margin: 0px 0px 0px 0px; }
div.tabcontent { margin: 0px 0px 0px 0px;min-width:1200px; } /* this width should become more dynamic */
div.footer { text-align:center;font-size:small;border-top:1px solid #F0F0F0;background-color:#1E1E1E;}
div#divparent { margin: 25px 25px 25px 25px; }
div#tabs { }

many thanks for your help !

V.

Richard Deeming

You have position:absolute; on the <body> element. If you remove that (and the min-width hack), the tab fills the width of the screen. If you genuinely need the body to be absolutely positioned, you'll need to force the body width by adding min-width: calc(100vw - 26px); to it. But that's slightly hacky, since 100vw includes the width of the vertical scroll-bar, and there's no simple way to account for it.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

V 0

body was indeed working in the back of my mind, though I was convincing myself the div would override the body. The background was moving, but I fixed that with adding background-attachment: fixed; and the site looks far better now! thanks!

V.