CSS Alignment Question

Basic CSS alignment question

Your #logo element should contains float: left;. I'm not sure if #navigation should have float style, but if you want to keep it, you should add another div element right after #navigation with style clear:both:


<div id="navigation">
    <ul>
        <li>Contact</li>
        <li>Photo</li>
        <li>Video</li>
    </ul>
</div>
<div style="clear:both; width: 1px;" />

This should do the trick :)

Regards

css alignment question

I don't know of a pure CSS technique which can handle this generically.

I've given up and used a jQuery plugin to do this in the past for something similar:

jQuery Masonry

(There's also a raw JavaScript version: Vanilla Masonry)

A picture is worth a thousand words:

Sample Image

Alignment problems in HTML and CSS

Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")

/* -------------------------------- The body and div placement ------------------------------ */
#Body {  text-align: center;}
#Window_Container {  width: 600px;  height: 400px;  margin: 100 auto;}
#Logo_and_Slogan {  background-image: url("wimage.png");  height: inherit;  width: 340px;  float: left;}
#Login_and_Sign_Up {  height: inherit;  width: 250px;  margin-left: 10px;  float: right;}
#Login {  text-align: center;  background-color: aquamarine;  height: 120px;}
#Sign_Up {  text-align: center;  background-color: brown;  height: 270px;  margin-top: 10px;}

/* -------------------------------- Modification of the form part        ------------------------------ */
input {  float: right;  margin: 3px 0 0 0;}
select {  float: right;  margin: 3px 0 0 0;}
label {  float: left;  margin: 5px 0 0 0;  clear: left;}
h2 {  margin: 0 0 2px 0;  padding: 3px;  font-size: 20px;}

<html><head>   <link href="welcome.css" type="text/css" rel="stylesheet">   <script src="client.js" type="text/javascript"></script>   <script src="serverstub.js" type="text/javascript"></script></head><body>    <div id="Window_Container">        <div id="Logo_and_Slogan"></div>        <div id="Login_and_Sign_Up">            <div id="Login">                <h2>Login</h2>                <form action="/action_page.php">                    <label>Email</label> <input type="text" name="email"><br>                    <label>Password</label> <input type="password" name="password"><br>                    <br><input type="submit" value="Submit">                </form>             </div>            <div id="Sign_Up">                <h2>Signup</h2>                <form action="/action_page.php">                    <label>First name</label> <input type="text" name="fname"><br>                    <label>Family name</label> <input type="text" name="lname"><br>                    <label>Gender</label>  <select name="gender">                                <option value="male">Male</option>                                <option value="female">Female</option>                            </select><br>                    <label>City</label> <input type="text" name="city"><br>                    <label>Country</label> <input type="text" name="country"><br>                    <label>Email</label> <input type="text" name="email"><br>                    <label>Password</label> <input type="password" name="password"><br>                    <label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>                    <br><br><br><input type="submit" value="Submit">                    </form>                 </div>            </div>        </div>    </body></html>

CSS vertical alignment problem

Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)

Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).

Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.

This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

CSS Alignment Issue on Navigation Bar

To make it works, change the #links{text-align:left}
And your issue about the icon's size put the fa-fw class. it will makeall the icons the same size.

Check the snippest below:

let sidenav = document.getElementById("sidenav");sidenav.onmouseover = function() {  sidenav.style.width = "280px";  document.getElementById("expand-icon").classList.add("expand");  document.getElementById("sidenav-expand").style.textAlign = "right";  document.getElementById("sidenav-heading").style.display = "inline-block";  //document.getElementById("links").style.float = "left";};sidenav.onmouseout = function() {  sidenav.style.width = "75px";  document.getElementById("expand-icon").classList.remove("expand");  document.getElementById("sidenav-expand").style.textAlign = "center";  document.getElementById("sidenav-heading").style.display = "none";};

#sidenav {  height: 100%;  width: 75px;  position: fixed;  z-index: 1;  top: 0;  left: 0;  background-color: #1e1e2d;  overflow-x: hidden;  color: grey;  transition: 0.2s;}
#sidenav-brand {  padding: 25px 20px;  background-color: #1a1a27;  display: flex;  flex-direction: row;  justify-content: space-between;  align-items: center;}
#sidenav-heading h2 {  margin: 0;}
#sidenav-expand {  text-align: center;  margin-left: 3px;}
.expand {  transform: rotate(180deg);}
#sidenav-links {  margin: 15px 0;}
#links {  list-style-type: none;  padding: 0;  text-align: left;}
#links li {  padding: 18px;  display: block;}
#links li:hover {  color: white;  background-color: hotpink;}

<!DOCTYPE html><html lang="en">
  <head>    <meta charset="UTF-8" />    <title>Navigation Bar</title>    <link href="css/style.css" rel="stylesheet" type="text/css" />    <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>    <script src="js/scripts.js"></script>  </head>
  <body>    <div id="sidenav">      <div id="sidenav-brand">        <div id="sidenav-heading" style="display:none;">          <h2>Expanded</h2>        </div>        <div id="sidenav-expand">          <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>        </div>      </div>
      <div id="sidenav-links">        <ul id="links">          <li>            <i class="fas fa-fw fa-id-card fa-2x"></i>          </li>          <li>            <i class="fas fa-fw fa-graduation-cap fa-2x"></i>          </li>          <li>            <i class="fas fa-fw fa-briefcase fa-2x"></i>          </li>          <li>            <i class="fas fa-fw fa-smile-beam fa-2x"></i>          </li>        </ul>      </div>    </div>  </body>
</html>