<div> Full 100% width

NorseMan

NorseMan

Member
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.

content_width.png


Code: 
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: 
<div class="content1"> <>><<></div>
 
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
 
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
 
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?
 
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
 
upload your code somewhere where we can saw the results then we will be able to find the reason of the issue
 
You must log in or register to reply here.
Back
Top