<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
 
Make sure that the parent element of the <div class="content1"> has a width of 100% or a width that allows the <div> to expand to the right. If the parent element has a fixed width, it may limit the expansion of the <div>, Ensure that there are no conflicting styles or CSS resets applied to the <div> or its parent elements that could be affecting its width If the content within the <div> is wider than the <div> itself, it may cause the appearance of a limited width, Use the browser's developer tools (right-click and select "Inspect" or "Inspect Element") to inspect the <div> element and check if any other CSS styles are being applied to it that might affect its width
Check if these things works

Thank You,
 
You must log in or register to reply here.
Back
Top