Element not floating!

HTML-CSS
1

If i use width 960px on aside it wont float to right, image’s div is 960px wide so is image alone. My screen is 1920px wide so divided by 2 it gives 960px, so why is this happening? Aside also wont float if i dont use width too, even thought it has only text inside which is supposed to be scaled? Setting width of 944px to Aside works, how so? Why wont 960px and 960px fit to my 1920px wide screen? Please someone explain me this mistery :confused:

Screenshot_1
Screenshot_11904×1059 321 KB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Homestead</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
	
	<div id="wrapper">
		
		<div id="header">
			<div id="logo"><a href="#"><img src="Images/logo.svg" alt="logo"></a></div>
			<div id="header-text">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia repellat asperiores, dolores dolorum accusamus ratione, doloribus quaerat dolor quo cumque?</p>
			</div>
		</div>
		
		<nav id="navigation">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Featured</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Services</a></li>
				<li><a href="">Gallery</a></li>
			</ul>
		</nav>
		
		<main id="main">
			<section id="section1">
				<h1>Lorem ipsum dolor sit amet.</h1>
				<hr>
				<div id="section1-text">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ratione, repellat. <br>Ut, reprehenderit! Deleniti ipsum temporibus minus perferendis, eveniet eaque!
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ratione, repellat. <br>Ut, reprehenderit! Deleniti ipsum temporibus minus perferendis, eveniet eaque!</p>
				</div>
			</section>
			
			<section id="section2">
				<div id="section2-image">
				<img src="Images/index-image1.jpg" alt="image">
				</div>
				<aside id="aside">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime possimus veritatis laudantium quia nostrum aliquid temporibus! Explicabo minima animi iste odio amet repellendus in, vitae molestias tempore vel omnis facere a accusantium ullam. In sint saepe, iste laborum architecto.</p>
				</aside>
			</section>
		</main>
		
		<footer id="footer">
		</footer>
	
	</div>
</body>
</html>

body {
	margin: 0;
	padding: 0;
}

#header {
	height: 299px;
	background: url("Images/header.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#header #logo img {
	height: 79px;
}

#header #logo {
	float: left;
	margin: 100px 0 0 100px;
}

#header #header-text {
	float: right;
	width: 312px;
	margin: 100px 100px 0 0;
}

#header #header-text p {
	text-align: center;
	margin: 0;
	color: white;
}

#navigation {
	position: absolute;
	top: 275px;
}

#navigation ul {
	list-style: none;
	margin: 0 0 0 751.36px;
	padding: 0;
}

#navigation ul li {
	float: left;
}

#navigation ul li a {
	text-decoration: none;
	display: block;
	padding: 15px 18px;
	background: yellow;
	color: black;
}

#main #section1 {
	text-align: center;
	margin-top: 61.08px;
}

#main #section1 h1 {
	margin-bottom: 34px;
}

#main #section1 #section1-text {
	width: 991px;
	margin: 32px auto 128px auto;
}

#main #section1 #section1-text p {
	margin: 0;
}

#main #section1 hr {
	width: 439px;
}

#section2 #section2-image {
	float: left;
	width: 960px;
	height: 499px;
}

#section2 #aside {
	float: right;
	background: rgba(110,35,36,1.00);
}
2

Can you share a link to your demo?

3

You are already floating the #section2-image container to the left, why do you need to float the aside to the right?

https://codepen.io/anon/pen/wbZMod

4

Because i want aside to be floated to the right, i want to use padding to push text in as well. Here’ s the demo of my goal: https://codepen.io/anon/pen/wbZMod
What i dont understand is, why wont 960px of aside fit right? When screen size is 1920px?

5

https://codepen.io/anon/pen/wbZMod

I just dont understand why wont 960px on aside work if my screen size is 1920px

6

I just moved my inspect element to bottom and realized my document is 1903px wide, while my screen is 1920px, is it because of scroll bar on right of screen?

7

Very cool project! Just a thought… If you hard code your page for only one certain screen size it only performs at that exact size.(Chances are you might want your layout to respond to different screen sizes) Try out some percentages instead of # of pixels :vulcan_salute:

1 Like
8

Thanks for advice, but if i want certain part of page to be 245px wide for example, how would i know how much in percentage that would be from 100% of screen’s size?

1 Like
9

You would only know that IF you knew what screen size the exact target device has.(Usually we don’t) That’s why relative units (along with CSS media queries) are so cool! It’s a layout design pattern that automagically works on many screen sizes!!! Check out the code for some responsive templates you like!! Keep Coding!!! :vulcan_salute:

1 Like
10
  1. If you give both floated elements a width of 960px then yes you would need to account for the scrollbar. You can see this fact by adding this CSS and viewing the page in Chrome.
::-webkit-scrollbar {
    width: 1px;
}

However, if you want them to take up 50% each then that is what you should be giving them as width.

  1. You can use max-width to give elements width and still let them shrink as needed. You can also use the calc function to do math, like for example subtracting a pixel value from a percentage value.

  2. You don’t need to use floats at all for the layout you want and I would suggest you don’t unless you have some good reason for it.