<div> Full 100% width

Discussing Html . Code , Software , other

Moderators: gesf, Michalio

Post Reply
User avatar
NorseMan
php-forum Fan User
php-forum Fan User
Posts: 65
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

What am I doing wrong? I want the <div> to strech out 100% to the right as well.
It is like this in Chrome, Opera and Edge.
Attached under the picture is the CSS and the HTML.

Image

Code: Select all

div.content1 {
	/*text-align: center;*/
	font-family: "Consolas", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: bold;
	font-size: 14px;	
	color: #ff6633;
	margin: auto;
	margin-top: 200px;
	position: initial;
	background-color: #676565;
	width: 100%;
	height: 300px;
	border: thin;
	border-radius: 5px;
	/*box-shadow: rgba(51, 51, 51, 0.2) 0px 1px 8px 0px;*/
}

Code: Select all

<div class="content1">&nbsp;<>><<></div>
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
User avatar
Michalio
Moderator
Moderator
Posts: 265
Joined: Sun Jul 18, 2021 1:33 pm
Location: Poland

the margin:auto may add some space on the right, use developers tools (each browser have good tool for that) to check the element padding/margin and its parents. You can also install Firefox Developer Edition to have advanced developer tools
Free coding lessons: https://php-forum.com/phpforum/viewtopic.php?t=29852
User avatar
NorseMan
php-forum Fan User
php-forum Fan User
Posts: 65
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

No, that didn't help. So I had to start over again and look for the error. I found it and i had an "padding-right: 10px;" in my "body" i must have overseen before. So when i removed this it was 100% again :D
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
jason06
New php-forum User
New php-forum User
Posts: 2
Joined: Sat Aug 20, 2022 1:31 am
Contact:

I am also experiencing the same problem with my website Some of my divs are not centered and some are not 100% wide.

What's the solution?
User avatar
NorseMan
php-forum Fan User
php-forum Fan User
Posts: 65
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

jason06, In my case it was my own fault. I didn't think about a padding right I had in my HTML body tag. I had overseen it, or not think about it. So in my case this time I had to remove this and everything was OK.

But I have read me up on another thing too. Have you heard about the "clear" "CSS property"? I've found a good article about it on MDN Web Docs.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear#try_it
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
User avatar
Michalio
Moderator
Moderator
Posts: 265
Joined: Sun Jul 18, 2021 1:33 pm
Location: Poland

upload your code somewhere where we can saw the results then we will be able to find the reason of the issue
Free coding lessons: https://php-forum.com/phpforum/viewtopic.php?t=29852
User avatar
NorseMan
php-forum Fan User
php-forum Fan User
Posts: 65
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

Isn't in my first posting :)
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
User avatar
Michalio
Moderator
Moderator
Posts: 265
Joined: Sun Jul 18, 2021 1:33 pm
Location: Poland

I was asking jason06 :)
Free coding lessons: https://php-forum.com/phpforum/viewtopic.php?t=29852
Post Reply