I'm having huge problems trying to arrage my DIVs, as I found that this thing is not as simple as it seems, just put a DIV and inside that DIV another 2 and you're done. The image bellow shows how I would want my page to be structured:
sur1.
surf2: surfleft, surfright. surf3. surf4 Where . means another line and , means that DIVs should be one next to another.
And also can't center that image vertical and horizontall middle on surfright from surf 2 parent.
#font-face
{
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1
{
font-size: 2.5em;
margin: 0;
}
p.title2
{
font-size: 3em;
}
.i1
{
height: 400px;
float: right;
display: block;
margin-top: 150px;
}
div.surf1
{
display: block;
background-image: url("surf1.jpg");
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
width: fit-content;
position:absolute;
background: #41c3ac;
height: 600px;
}
div.surfleft {
float:left;
display: block;
width: 45%;
padding-top: 80px;
height: 600px;
background: #8C78B1;
}
div.surfright {
float: right;
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 600px;
}
div.surf4
{
background: #8C78B1;
height: 600px;
}
div.text1
{
padding-top: 100px;
color: white;
text-align:center;
font-size: 2.5em;
}
div.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover
{
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br><br><br><br><br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<div class="surfleft">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surfright">
<img src="console.png" alt="404 Image not Found" height="400px">
</div>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
Please note that you may use correct width values to have fine edges in your design.
div.surf1
{
display: block;
background-color: #cdcdcd;
height: 100px;
}
div.surf2 {
background: #41c3ac;
height: 100px;
}
div.surfleft {
float:left;
display: block;
width: 50%;
height: 100px;
background: #8C78B1;
}
div.surfright {
float: right;
width: 50%
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 100px;
}
div.surf4
{
background: #8C78B1;
height: 100px;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<div class="surf1">
<div class="text1">Surf 1</div>
</div>
<div class="surf2">
<div class="surfleft">Surf left</div>
<div class="surfright">Surf right</div>
</div>
<div class="surf3">Surf 3</div>
<div class="surf4">Surf 4</div>
Related
This is the portion of my template, CSS is inline for demo purposes only:
.header {
background-color: #333;
color: #FFF;
padding: 30px;
}
.content {
width: 750px;
}
.mc-info {
height: auto;
border: 2px solid;
width: 800px;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.mc-info-image {
width: 240px;
}
.mc-info-image img {
margin-right: 29px;
height: 340px;
float: left;
}
.description {
font-size: 16px;
float: right;
}
.vehiname {
font-size: 18px;
color: green;
}
.price {
color: red;
}
footer {
color: #333;
background-color: blue;
}
It's been causing problems with getting text and images to align properly, as images and DIV overrun, as seen at https://jsfiddle.net/r7podhq6/- the div does not resize with the content, even though a standard image is set.
I'm trying to do something like this for my layout, although with the bordered DIV's I'm using and keeping class mc-info at the width set.
Should I convert to flex or grid for this? If not, how could I improve this?
My problem is getting text and images to align for this basic template for a car dealer platform.
Looking for help and constructive criticism./
You should really consider learning CSS flex and grid. using float to align divs is not the best practice in 2021.
I have added display: flex to .mc-info and removed all the float properties and max-width:100% to auto scale.
.mc-info {
display: flex;
}
.mc-info-image {
max-width: 800px;
}
img {
max-width: 100%;
}
.info-wrapper {
padding-left: 20px;
}
And lastly wrapped the car information in <div class="info-wrapper"> </div>
Final code
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<body>
<title>YourLeisure Motorhomes & Caravans</title>
<style>
.header {
background-color: #333;
color: #FFF;
padding: 30px;
}
.content {
width: 750px;
}
.mc-info {
display: flex;
height: auto;
border: 2px solid;
max-width: 800px;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.mc-info-image {
max-width: 800px;
}
.mc-info-image img {
margin-right: 29px;
height: 340px;
}
.description {
font-size: 16px;
float: right;
}
.vehiname {
font-size: 18px;
color: green;
}
.price {
color: red;
}
footer {
color: #333;
background-color: blue;
}
img {
max-width: 100%;
}
.info-wrapper {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>YOURLEISURE MOTORHOMES</h1>
<h2>49 High Street, Northtown</h2>
</div>
<div class="content">
<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/VW_T5_California_front_20071215.jpg/800px-VW_T5_California_front_20071215.jpg">
</div>
<div class="info-wrapper">
<div class="vehiname">
<h2>VOLKSWAGEN CALIFORNIA 2.0 BITDI 180</h2>
</div>
<div class="price">
<h2>£45,000</h2>
</div>
<div class="description">
This example has all the equipment you could want
</div>
</div>
</div>
<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Ford_Transit_FT_130_Camper_%2818418440689%29.jpg/1024px-Ford_Transit_FT_130_Camper_%2818418440689%29.jpg">
</div>
<div class="info-wrapper">
<div class="vehiname">
<h2>FORD TRANSIT CAMPERVAN 2.0</h2>
</div>
<div class="price">
<h2>£1,000</h2>
</div>
<div class="description">
red/white
</div>
</div>
</div>
<footer>
Content to come
</footer>
</body>
</html>
The answer given by Josh answers your question.
Moreover, i'd recommend you to use flexbox/grid over float. They have a lot of properties that could be really helpful in making a responsive design.
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 2 years ago.
I am making a website in which a page needs a hoverbox with cool animations. I quickly wrote the code. But the transition is not working like it should have. It is only working from normal to :hover, not :hover to normal. As soon as I move my mouse somewhere else, my div returns to its normal state without any animations. Does anyone have a solution for this?
Here are my HTML and CSS files -
HTML -
<html>
<head>
<title> Rubik's Point | Home </title>
<link rel = "stylesheet" href = "Styles.css">
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght#0,300;0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<div class = "header">
<div class = "logo">
<h1 class = "specialTitle"> RUBIK'S POINT </h1>
</div>
<div class = "navContainer">
<ul>
<li><b> Home </b></li>
<li><b> Tutorials </b></li>
<li><b> Give Us a Feedback </b></li>
<li><b> Contact Us </b></li>
</ul>
</div>
</div>
<div class = "intro">
<div class = "introTextbox">
<h1> Become a Cube Master </h1>
<h3> In this section, you will find many tutorials which will teach you how to solve different types of cube puzzles. </h3>
</div>
</div>
<div class = "mainContent">
<center> <h1> Here are some Popular Tutorials </h1> </center>
<div class = "hoverContainer">
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\cube background.jpg" width = "100%" height = "100%"></img>
</div>
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\fast solve 2.jpg"></img>
</div>
</div>
</div>
<div class = "footer">
<div class = "colfooter">
<p> Give Us a Feedback > </p>
<p> Learn to Solve the Rubik's Cube > </p>
<p> Learn to Solve the Rubik's Cube Faster > </p>
</div>
<div class = "colfooter">
<p> Contact Us > </p>
<p> Learn Conventional Algorithms > </p>
</div>
</div>
</body>
</html>
CSS -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Mulish', sans-serif;
}
.header {
width: 100%;
height: 75px;
background-color: #222222;
color: white;
line-height: 75px;
padding-left: 50px;
padding-right: 100px;
overflow-y: hidden;
position: fixed;
}
.logo {
width: 30%;
float: left;
font-family: "Lulo Clean";
}
.logo a {
text-decoration: none;
color: white;
}
.navContainer {
width: 70%;
list-style-type: none;
float: right;
text-align: right;
}
.navContainer li {
display: inline-block;
padding-left: 50px;
font-size: 20;
}
.navContainer a {
text-decoration: none;
color: white;
}
.navContainer a:hover {
color: orange;
}
.intro {
width: 100%;
height: 850px;
background-color: gray;
color: white;
line-height: 850px;
text-align: right;
background-image: url("F:/Rubiks Point/Images/cube background.jpg");
}
.introTextbox {
width: 40%;
height: 100%;
float: right;
text-align: center;
line-height: 50px;
padding-top: 400px;
margin-right: 100px;
font-size: 20;
font-family: 'Mulish', sans-serif;
}
.mainContent {
width: 100%;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 75px;
background-color: white;
}
.footer {
width: 100%;
height: 230px;
padding-left: 340px;
padding-right: 440px;
padding-top: 55px;
padding-bottom: 60px;
background-color: #222222;
color: white;
display: flex;
}
.row1 {
display: flex;
padding-top: 125px;
padding-bottom: 50px;
padding-right: 50px;
}
.row2 {
display: flex;
padding-top: 75px;
padding-left: 150px;
padding-right: 200px;
}
.col {
width: 330px;
margin-left: 50px;
text-align: center;
}
.col p {
margin-top: 30px;
}
.colfooter {
padding-left: 100px;
}
.colfooter a {
color: white;
}
.colfooter p {
padding-top: 15px;
}
.specialTitle {
letter-spacing: 10px;
}
.hoverContainer {
width: 100%;
height: 375px;
margin-top: 75px;
display: flex;
}
.hoverbox {
width: 30%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
text-align: center;
}
.hoverbox img {
width: 100%;
height: 100%;
}
.hoverbox:hover img {
border-radius: 50%;
width: 25%;
height: 25%;
transition: 0.5s ease;
}
#currentPage {
color: orange;
}
Thanks a lot in advanced!
Move the transition: 0.5s ease; setting out of the .hoverbox:hover img rule and put it into the .hoverbox img rule - it needs to be in the default state, not in the hover state.
I want to make text always inside the white block at any screen resolution?
Hence I don't want to add ant media queries for every 100px.
HTML
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
CSS
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 100%;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 40px;
padding-left: 100px;
}
.conclusion-list li {
font: 18px/33px Open Sans;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
}
emphasized text
https://i.imgur.com/7B53HH7.png
right image
https://i.imgur.com/16hTMJ4.png
Use absolute units on your background image, making it the same size regardless of screen size. I just played with some numbers in my snippet below. I also disabled word wrap, so the text stays inside the image at all times.
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 550px;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 40px;
padding-left: 100px;
}
.conclusion-list li {
font: 18px/33px Open Sans;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
white-space: nowrap;
}
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
Try transform: scale(1);
.wrapper { display: flex }
.left-wrapper { width: 35%; }
.right-wrapper { width: 65%; }
.conclusion-block { width: 550px; transform: scale(1); background: url(https://i.imgur.com/NKTY6Du.png); background-size: 100%; background-repeat: no-repeat; }
ul.conclusion-list { padding-bottom: 75px; padding-top: 40px; padding-left: 100px; }
.conclusion-list li { font: 18px/33px Open Sans; font-weight: 600; letter-spacing: 0.18px; color: #333333; margin-bottom: 0; white-space: nowrap; }
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
If you want to keep your background with only on image you can always try to make the text smaller/wider with vh size and change your padding with % so it can follow.
Here is an exemple:
html
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
css
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 100%;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 12%;
padding-left: 20%;
}
.conclusion-list li {
line-height: auto;
font-family: Open Sans;
font-size: 2.1vw;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
}
You can have a look:
https://jsfiddle.net/jeymchugh/x82aqwou/
Or you can try to separate your background in different pieces so it can stay appart, this would be a better solution.
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I'm trying to recreate this
My current code is this
The issue is that I want the balance div to stretch as the balance gets bigger, as currently it exceeds its bounds and is shifted underneath, other small issues about appearance are present too!
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 75%;
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: initial !important;
height: initial !important;
font-size: 1em;
float: right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<i class="sign out icon"></i>
<div class="balance">
<span class="funds">$<span class="value">4.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I think I have managed to achieve what you want using display:table and display:table-cell. The plus icon is set to a fixed width but if the value gets larger it will expand the div.
I have also removed some of the floats and switched them to display:inline-block so they can be aligned vertically. I have changed the HTML very slightly by adding some additional wrappers.
You might want to implement the changes in to your main stylesheet because currently I am just overriding your styles at the bottom of the stylesheet.
https://codepen.io/anon/pen/jwyXMM
You can use display:inline-block; so that your content fits properly in the balance div.
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
width:200px;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: inline-block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 100%;
display:inline-block;
span.value{
font-size:1em;
width:70%;
}
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: 25% !important;
height: initial !important;
font-size: 1em;
float:right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<div class="balance">
<i class="sign out icon"></i>
<span class="funds">$<span class="value">5333.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I have also moved (i.sign.out.icon) sign out icon within the balance div and made width of balance div to 100% so that everything stays on same line and fits properly.