How can i prevent the text going below the button when it gets too large?
HTML
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500;900&display=swap"
rel="stylesheet">
</head>
<html>
<body>
<div class="app">
<div class="container">
<h1>Shopping List</h1>
<input type="text" placeholder="Add an item" id="item-input"/>
<button id="item-button">Add</button>
<ul id="items">
<li><button class="remove">X</button>Hamburger</li>
<li><button class="remove">X</button>Milk</li>
</ul>
</div>
</div>
</body>
</html>
This is what is happening
Text going under the button
And this is the CodePen
https://codepen.io/ReaperClown/pen/oNZprmY
Change break-word to break-all:
li {
margin: 0.5em 0;
word-break: break-all;
}
Should do the trick..
#items li {
display:flex;
word-break: break-all; // Not needed but might fix the overflow issue later on
}
You can specify whether line breaks should appear wherever your <li> text would overflow its content box with word-break. Using word-break: break-all; on your <li> elements will make sure that line breaks appear when a list item has a long line of text and overflows its content box.
body {
padding: 0;
margin: 0;
background-color: #101011;
font-family: "Raleway", sans-serif;
}
.app {
position: relative;
}
.container {
background-color: #a8bfb6;
position: absolute;
padding: 1em 2em;
width: 400px;
left: 0;
right: 0;
margin: auto;
top: 50vh;
transform: translateY(-50%);
}
h1 {
text-transform: uppercase;
letter-spacing: 4px;
color: #2b2b2e;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 0.5em 0;
word-break: break-all;
}
#items {
display: table-cell;
}
.remove {
border: none;
background-color: #f4d58d;
margin-right: 5px;
cursor: pointer;
word-wrap: inherit;
position: relative;
}
#item-button {
cursor: pointer;
background-color: #f4d58d;
border: none;
padding: 0.5em;
}
input {
border: none;
padding: 0.5em;
}
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500;900&display=swap" rel="stylesheet">
</head>
<html>
<body>
<div class="app">
<div class="container">
<h1>Shopping List</h1>
<input type="text" placeholder="Add an item" id="item-input"/>
<button id="item-button">Add</button>
<ul id="items">
<li><button class="remove">X</button>Hamburger</li>
<li><button class="remove">X</button>Milk</li>
<li><button class="remove">X</button>abschbaskjhdbaksdhjbalskdjabsdklahbsdlkajsbdalksjdbalksdj</li>
</ul>
</div>
</div>
</body>
</html>
Related
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>
I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
My angular code on gitHub is using ngRoute, where the page1.html gets loaded in ngView.
I have input element in page1.html with its css set to 100% thus is expected to fill the width of the view but it is only taking about 70% or so.
If the main element width set to 100%, the footer buttons disappear, image 2.
Not sure why? Thanks
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// page1.html
<section>
<input type="text" placeholder="page1-input1">
</section>
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Try to set the min-width of the input field to 100% something like this in your CSS code:
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
min-width: 100%; }
this should solve the issue when input is not getting 100% width of its parent.
The input element is getting inserted inside 'main' container. Hence, set the width to 100% for the main tag.
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
Here is the fix
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
width: 100%;
}
main {
z-index: -2;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.25em;
width: 100%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
// index.html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<!--
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
-->
<main ng-view>
<section>
<input type="text" placeholder="page1-input1">
</section>
</main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Well you mainMenu is set to width 70% and when you assign a child of mainMenu width 100% it takes the whole width of its parent, so eventually your input will be long as you parent container which means 70%. If you want it to be 100% of the screen you have to make the mainMenu 100%.
In the footer of this html file, I have 3 buttons.
The first image shows how the 3 buttons are arranged.
The second image shows is when the footer middle button is commented out.
The third image is when ng-hide="true" on the middle button.
How can I have no space between the No and YES buttons when the middle is ngHide(n)? Thanks
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 1%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main, .mainMenu {
position: absolute;
top: 2.5em;
}
main {
z-index: -2;
width: 100%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
section {
text-align: center;
}
input {
font-size: 1em;
padding: 0.25em;
margin: 0.5em;
width: 90%;
}
header, footer {
background-color: white;
}
.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
padding: 2px;
}
.horizontal-style button {
display: block;
border: 1px solid black;
text-align: center;
background: #dfdfdf;
}
footer button {
width: 100%;
border-radius: 6px;
font-size: 1.5em;
}
.mainMenu {
padding-left: 1em;
background-color: #dfdfdf;
width: 70%;
border-radius: 0 6px 10px 0;
z-index: -1;
}
ul {
list-style-type: none;
}
ul li img {
vertical-align: middle;
padding-right: 0.25em;
}
a {
display: block;
padding: 1em 0em;
}
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
<base href="http://localhost:63342/students/">
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="services/routing.js"></script>
<script src="services/menuToggle.js"></script>
<script src="controllers/menuToggleCtrl.js"></script>
<script src="controllers/mainMenuCtrl.js"></script>
<script src="controllers/page1Ctrl.js"></script>
<script src="controllers/page2Ctrl.js"></script>
</head>
<body>
<header ng-controller="MenuToggleCtrl">
<button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
<ul>
<li ng-repeat="item in menuItems">
<a href="#/{{item.name}}">
<image ng-src="images/{{item.image}}.png"></image>
{{item.name}}
</a>
</li>
</ul>
</section>
<main ng-view></main>
<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<li><button type="button">EXTRA</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<!--<li><button type="button" ng-hide="true">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
Hide the entire li by applying ng-hide to li element.
<li ng-hide={{expression}}><button type="button">EXTRA</button></li>
NOTE: You can also use ng-if instead of ng-hide which will completely remove the <li> from DOM and can prove performant with large content inside the container.
I have checked your code this is fine. you are hiding the below button
<button type="button">EXTRA</button>
You need to hide full below li
<li><button type="button">EXTRA</button></li>
This works fine.
When you hide the button alone, still the li is visible and some of the styles added to li creates some spacing between two buttons.
Hide the entire li by applying ng-hide to li element.
<li ng-hide="true"><button type="button">EXTRA</button></li>
On my site, matprichardson.co.uk, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.
For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.
I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening. Could somebody please point me in the right direction?
CSS
body {
margin: 0;
padding: 0;
}
#maincontainer {
font-family: arial;
margin-bottom: 20px;
}
.dialog {
border: 5px solid black;
display: inline-block;
background-color: white;
}
.dialog p, .dialog ul {
font-family: "Courier New";
font-size: 12px;
}
.dialogtitle h2 {
margin: 0;
padding: 1px 0;
font-family: "courier new";
font-size: 12px;
background-color: black;
color: white;
text-align: center;
}
.dialogtitle {
cursor: move;
}
.dialogcontent {
margin: 10px;
}
.windowsbutton{
width: 70px;
height: 22px;
font-family: "courier new";
font-weight: bold;
font-size: 12px;
border-width:2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
.buttonsurround {
border: 1px solid black;
max-width: 70px;
border-radius:3px;
display: inline-block;
margin: 0 10px;
}
.buttonselected {
border-width: 2px;
}
.windowsbutton:focus {
outline: none;
}
#maindialog {
position: absolute;
top: 220px;
left: 50%;
margin-left: -150px;
}
#helpdialog {
display: none;
width: 500px;
top: 70px;
left: 110px;
}
#helpClose {
margin:0 200px;
}
/*Menu*/
#menu {
margin: 0 0 20px 0;
padding: 0;
height: 30px;
background-color: black;
width: 100%;
}
/*Icons*/
.iconcontainer {
width: 80px;
float: left;
}
.iconcontainer:hover {
cursor:pointer;
}
.foldericon {
height: 40px;
width: 40px;
border: 2px solid black;
border-radius: 0 0 10px 0;
text-align: center;
margin: 0 auto;
background-color: white;
}
.iconhead {
height: 10px;
border-bottom: 2px solid black;
background-color:black;
}
.foldertext {
margin-top: 5px;
}
.iconcontainer h1 {
font-family: "Courier New";
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mat Richardson</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="menu">
</div>
<!--an icon. Lovely, isn't it?-->
<div class="iconcontainer" id="blog">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>blog</h1>
</div>
</div>
<div class="iconcontainer" id="pictures">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>pics</h1>
</div>
</div>
<div class="iconcontainer" id="websites">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>websites</h1>
</div>
</div>
<div id="maindialog" class="dialog">
<div class="dialogtitle">
<h2>Welcome to matprichardson.co.uk</h2>
</div>
<div class="dialogcontent">
<div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="H̲elp" id="mainHelp" class="windowsbutton" /></div>
</div>
</div>
<div id="helpdialog" class="dialog">
<div class="dialogtitle">
<h2>Help</h2>
</div>
<div class="dialogcontent">
<p>Welcome to the personal site of Mat Richardson. There's not much to see right now,
but do feel free to have a click about.</p>
<p>Some links you might want to visit (or not, your choice):</p>
<ul>
<li>2toria (another site I own)</li>
<li>My Codepen Profile</li>
<li>My StackOverflow Profile</li>
<li>My twitter account</li>
<li>My LinkedIn Profile</li>
</ul>
<div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
</div>
</div>
</div>
</body>
</html>
It's because the position property for your blog, websites,and pics divs is set to relative and therefore it's taking up space. Change it so that they're set to absolute, and the text on your help dialog goes back to normal.
You could add something like:
#blog, #pictures, #websites {
position:absolute;
}
#blog {
left:20px;
}
#pictures {
left:80px;
}
#websites {
left:140px;
}
jsFiddle example
As I noted in my comment:
This is because the dialog is positioned relatively and it is still in
document normal flow. Therefore the content wraps the floated icons
which are at the left-top of the page.
Positioning the dialog box absolutely will fix the problem.
Alternatively, you can add clear: both declaration to the dialog element in order for clearing the floats. Thus the content of relative positioned dialog won't wrap the floated icons anymore.