This is what I have:
This is what I want:
In the descriptions of the two smaller images, I'm having difficulty implementing the city name and description in my current flexbox.
.bottomcontainer {
display: flex;
justify-content: space-evenly;
padding-left: 3vw;
padding-right: 35vw;
align-items: baseline;
}
.bottomcontainerdescriptions {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bottomcontent {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 30px;
}
.people {
width: 23vw;
border: 5px solid #ffffff;
/* picture in the About Us of 3 people */
}
.bottomimages {
width: 9vw;
border: 5px solid #ffffff;
}
<body style="background-color: #e3e3e3;">
<div class="bottomcontainer">
<div class="bottomcontent">
<h2 style="font-size: 26px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
About Us
</h2>
<img src="images/people.webp" class="people">
<h2 style="font-size: 16px; color: black; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; padding-top: 10px;">
We Make Real Estate Easy
</h2>
<h2 style="font-size: 12px;font-weight: initial;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; max-width: 30vw;">
We're here to make to make everything about Real Estate easy. Whether you are an Owner, Investor, Property Manager or Tenant ManifestMy.Space is your one stop shop to manage your space.
</h2>
</div>
<div class="bottomcontent">
<h2 style="font-size: 26px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
Investors
</h2>
<img src="images/tucson.webp" class="bottomimages">
<br>
<img src="images/austin.webp" class="bottomimages">
</div>
</div>
</body>
If I add another column in my current flexbox, my other components get squished together as my alignment is space-evenly. If I could get some assistance on this, it would be much appreciated!
Related
I'm new to CSS/HTML, and I can't figure out why the border does not line up with the content/image. The bottom border is offset by a few pixels, leaving a gap between the edge of the picture and the actual border. Does anyone know how to fix this?
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 +1 917-722-2439</em><br> 📧
<em>  info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>â“‚</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>
https://jsfiddle.net/wp9cn3kt/1/
Just give display: block; property to your image and that's it.
/* Body */
body {
background-image: url("https://i.pinimg.com/originals/a4/bf/58/a4bf58276d674626f52092e2194f79d8.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
/* Title */
h1 {
background-color: rgba(255, 255, 255, 0.5);
height: auto;
margin: 0% 1% 2% 1%;
padding: 0% 10% 0% 10%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 225%;
color: white;
text-align: center;
line-height: 150%;
text-shadow: 2px 2px rgb(253, 0, 232);
}
/* Left Body Items */
#left {
float: left;
width: 67%;
margin-right: 2%;
margin-left: 1%;
}
/* Presentation Text */
#intro_text {
background-color: rgba(255, 255, 255, 0.80);
padding: 2%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: black;
text-align: justify;
line-height: 130%;
}
/* Skyline Photo */
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
/* Bar Menu */
/* Right Body Items */
#right {
float: right;
width: 30%;
}
/* Booking Button */
#button {
/* Booking Button */
background-color: black;
margin-bottom: 2%;
border-style: solid;
border-width: 2%;
border-color: white rgb(253, 0, 232) rgb(253, 0, 232) white;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px rgb(253, 0, 232);
}
/* Informations */
#infos {
/* General Information */
background-color: rgba(253, 0, 232, 0.6);
padding: 1% 3% 3% 3%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}
.bold_underlined {
/* Information Headings */
font-weight: bold;
text-decoration: underline;
}
#metro {
/* Metro Information */
color: gold
}
<h1>Rooftop Bar, in the center of NYC</h1>
<!--Title-->
<div id="blocks">
<!--Body-->
<div id="left">
<!--Left Body Items-->
<div id="intro_text">
<!--Presentation Text-->
The 23rd Street Rooftop Bar welcomes you every day for a unique New York experience. In the iconic neighborhood of Chelsea, the bar presents a magnificent view on the New York skyline at night. With DJs from all around the world, the Rooftop Bar offers
a vast assortment of music to suit all tastes: from Disco to Hip-Hop, passing by Pop and Electro. The perfect party for you!
</div>
<br>
<div id="photo">
<!--Skyline Photo-->
<img src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" style="display: block;" alt="View from the rooftop." width="100%">
</div>
<br><br>
<div id="menu">
<!--Bar Menu-->
Menu
</div>
</div>
<div id="right">
<!--Right Body Items-->
<div id="button">
<!--Booking Button-->
<p>
Book now!
</p>
</div>
<div id="infos">
<!--Informations-->
<p>
<!--Age & ID-->
<em>All guests must be aged 21 or older.<br>
A valid ID is required.<br></em>
<br>
<!--Opening Hours-->
<span class="bold_underlined">Opening Hours:</span><br> Mon: 5pm-1am<br> Tue: 5pm-1am<br> Wed: 5pm-1am<br> Thu: 5pm-1am<br> Fri: 5pm-2am<br> Sat: 2pm-3am <br> Sun: 2pm-8pm<br>
<br>
<!--Contact Info-->
<span class="bold_underlined">Contact Info:</span><br>
<em>📞 +1 917-722-2439</em><br> 📧
<em>  info#rtnyc.com </em><br>
<br>
<!--Location-->
<span class="bold_underlined">Access:</span><br>
<span id="metro"><strong>â“‚</strong> 23rd Street</span><br>
<em>119 W 23rd St, New York, NY 10011, USA</em>
</p>
<!--Embeded Map-->
<iframe src="https://snazzymaps.com/embed/187161" width="100%" height="250px" style="border:none;" title="Google Map of Rooftop Party location"></iframe>
</div>
</div>
</div>
If you want a simple fix, you can try put the id="photo" in the img element instead of the container (if no need to have a container).
<div> <!--Skyline Photo-->
<img id="photo" src="https://www.thepresslounge.com/wp-content/uploads/2014/06/Press_Lounge_0028-HDR-2-Edit-1600x900.jpg" alt="View from the rooftop." width="100%">
</div>
Styling in original code:
#photo {
border-width: 3%;
border-style: solid;
border-color: rgb(253, 0, 232);
}
The problem is that when I place an image with absolute position and it passes the background of the nav, the image goes over the nav, and the idea is that it goes behind the nav [enter image description here][1]
Example:
[1]: https://i.stack.imgur.com/ZsXWN.png
Code CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #110047;
color: white;
background-image: url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%2308778e' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
font-size: 14px;
font-family: 'Alfa Slab One', cursive;
}
header {
background: url('img/untitled.png') no-repeat center;
background-attachment: fixed;
}
#title {
width: 100%;
height: 49vh;
padding-bottom: 827px;
}
#titlex {
margin-top: 260px;
margin-left: 380px;
font-size: 110px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: rgb(0, 68, 255);
position: fixed;
}
#titley {
margin-top: 260px;
margin-left: 370px;
font-size: 110px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: rgb(0, 132, 255);
}
ul {
list-style: none;
}
a {
color: white;
text-decoration: none;
}
/* NAVIGATION */
.nav-main {
background-color: black;
position: fixed;
font-size: 30px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px;
}
.map {
margin-top: 100px;
width: 150px;
width: 7%;
margin-left: 180px;
margin-right: 120px;
}
.nav-main ul {
margin-left: 120px;
display: flex;
}
.nav-main ul li {
padding: 0px;
}
.nav-main ul li a {
margin-top: 130px;
cursor: pointer;
display: inline-block;
margin-right: 20px;
margin-left: 40px;
border: 0;
color: #fff;
font-size: 20px;
transition-duration: 0.5s;
transition-property: all;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.nav-main ul li a:hover {
border-bottom: 3px solid rgb(69, 131, 212);
color:rgb(69, 131, 212);
padding-bottom: 3px;
}
/* ABOUT US */
#about {
background-image: url('img/ublogoa.png');
background-repeat: no-repeat;
background-position-y: 40px;
background-position-x: 1000px;
background-color: #fff;
padding-bottom: 400px;
}
.lol {
margin-top: 70px;
position: absolute;
display: block;
width: 80%;
height: auto;
margin-left: -250px;
}
#about1 {
background-image: url('img/blacktetas.png');
background-repeat: no-repeat;
background-position-y: 40px;
}
#titlea {
padding-top: 70px;
color: rgb(151, 151, 151);
margin-left: 605px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#under {
margin-left: 600px;
color:rgb(47, 103, 255);
font-size: 50px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#dialog1 {
margin-left: 600px;
margin-right: 150px;
margin-top: 50px;
color:rgb(151, 151, 151);
font-size: 17px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog2 {
margin-left: 600px;
margin-top: 30px;
margin-right: 150px;
color:rgb(151, 151, 151);
font-size: 17px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog3 {
margin-left: 600px;
margin-top: 30px;
margin-right: 150px;
color:rgb(151, 151, 151);
font-size: 17px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog4 {
margin-left: 600px;
margin-top: 30px;
margin-right: 150px;
color:rgb(151, 151, 151);
font-size: 17px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnderBlocks</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="img/ublogoa.png">
</head>
<header>
<div id="title">
<div class="nav">
<nav class="nav-main">
<ul class="nav-menu">
<li>
<a class="left" href="#about-us">ABOUT US</a>
</li>
<li>
<a class="left" href="#marketplace">MARKETPLACE</a>
</li>
<img src="img/whitelogo.png" alt="Marketplace Logo" class="map">
<li>
<a class="right" href="#contact-us">CONTACT US</a>
</li>
<li>
<a class="right" href="#portfolio">PORTFOLIO</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<body>
<a name="about-us">
<div id="about">
<img src="img/sheguel.png" alt="Render Minecraft" class="lol">
<h3 id="titlea">ABOUT</h3>
<h1 id="under">UNDERBLOCKS</h1>
<h4 id="dialog1">UnderBlocks, is a Studio focused on creating content for the Mojang or Minecraft Marketplace, which has been uploading content to the Marketplace for more than 6 months, and will continue to upload content for the public, we focus on uploading maps, skinpacks, texturepacks, add-ons and more for the entire Minecraft community to enhance its gameplay in a potential way.</h4>
<h4 id="dialog2">Our main objective is to create the best content for the Minecraft public, respecting the Mojang rules and conditions to be able to upload our content, for all the public, every day we have new ideas to improve and expand UnderBlocks, and every day we have new projects. which we have planned to upload after everything is finished and with 0 failures</h4>
<h4 id="dialog3">We have managed to upload our first content to the Marketplace on August 25, 2020, it was a day of celebration for the entire UnderBlocks team, since it would be our first content uploaded to the public from the Marketplace, after that we continue to be inspired by upload more content and every day more excited to upload our types of content, skinpacks, maps, add-ons and more</h4>
<h4 id="dialog4">On August 22 we finally managed to become an official partner with Mojang and be able to upload our content from our own hands to the Marketplace, as our first content uploaded was a day of joy and happiness, and we returned inspired by uploading new types of content and we will continue uploading great types of content for the Minecraft community</h4>
</div>
<a name="portfolio">
<div id="portfolio">
</div>
<script src="scripts/main.js"></script>
</body>
</html>
These are the codes of the web, the image its class is lol, please I need help
I have created Django html email templates that looks something like this:
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Hello John
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Welcome to the site
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
More text here...
</p>
Since it's an email template, I must use inline styles and as a result it looks ugly and I have to repeat myself. I'm looking for a way to improve this.
My idea is to create a template tag that will return the style info:
#register.filter
def style(tag):
tags = {
'p': "style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;""
# Will add more options here
}
return tags[tag]
Then in my template I will use:
<p|style>
Hello John
</p>
<p|style>
Welcome to the site
</p>
<p|style>
More text here...
</p>
I know it is not ideal to put html in python code, but I can't think of a better way?
Any thoughts or better ways to achieve this?
Consider defining a CSS class and assigning this class to all the elements that need to be formatted.
template.css
.MyEmailStyle {
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.6em;
font-weight: normal;
margin: 10px 0 10px;
padding: 0;
}
main.html
<p class="MyEmailStyle">
Hello John
</p>
As you can't include external or internal CSS files in an email template, consider using this library.
I am having trouble trying to decrease the line spacing here. Changing the line-height doesn't do anything.
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPhone Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPad Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> Brokers' client</p></div>
Thanks for any help
You can decrease the line spacing by applying the line-height style to the p element, rather than the span element.
Here's a full working example:
.spacing {
line-height: 18px;
}
.star {
color: rgb(137, 137, 137);
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}
<p class="spacing">
<span class="star"> ★</span> iPhone Investor
</p>
<p class="spacing">
<span class="star"> ★</span> iPad Investor
</p>
<p class="spacing">
<span class="star"> ★</span> Brokers' client
</p>
I am not positive, but I think you referring to the margin that is added to 'p' tags by default.
All p tags have a margin on the bottom, something like 15px; You can override that with the following...
CSS in a file...
p { margin-bottom: 5px; }
or Inline
<p style="margin-bottom: 5px"></p>
I'm working with PHP, HTML and CSS to make a website. I'm having this issue: There are 2 divs: profile_Nick and profile_Ranks. However profile_Ranks cannot just go right bellow profile_Nick. How can I set their position bellow the WalkerJetBat text? Thanks.
.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
float: left;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}
.profile_Ranks
{
position:relative;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 12px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
float:left;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
top:50px;
}
<div class="profile_infoholder">
<div class="profile_Nick">
<? echo $steamprofile['personaname']; ?>
</div>
<div class="profile_Ranks">
Developer
</div>
<div class="profile_Ranks">
+Premium
</div>
</div>
Solution is here :
DEMO
I have just removed you float property from .profile_Nick class
.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}
Your style sheet for .profile_Ranks contain top:50px property I have reduced to display it correctly at the bottom in my demo.
Found btw.
.profile_infoholder .profile_Nick
{
position:absolute;
}
Adding this fixed.