I'm trying to resize the font to the container, to be kept in a single line not matter how long is, just by resizing it's font.
this is what I'm talking about
#project_stats{
padding: 0;
width: 320px;
margin: 0;
border-right: 1px solid #ccc;
pr1 {
font-size: 2vw; overflow: hidden;
letter-spacing: -1px;
font-weight: normal;
padding: 0px;
margin: 0px;
color: black;
}
}
Any ideas?
---- EDIT 1 ------
Html.
<% provide(:title, #project.name) %>
<div class="row">
<div class="col-md-12" id="project_canvas">
<div class="row">
<div class = "col-md-3" id="project_stats">
<pr1><%= #project.name %></pr1>
........
Update to CSS
#project_canvas{
background: white;
width: 1600px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 10px;
padding: 30px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
#project_stats{
padding: 0;
width: 320px;
margin: 0;
border-right: 1px solid #ccc;
pr1 {
font-size: 2vw; overflow: hidden;
letter-spacing: -1px;
font-weight: normal;
padding: 0px;
margin: 0px;
color: black;
}
}
}
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
I am pretty new to HTML5 and CSS and decided to try and make my own website to get my feet wet. I am looking to make a simpler version of http://www.igshoutouts.com/ to advertise my Instagram pages.
I am having trouble lining up the boxes such as putting the MEDIA, FOLLOWERS, and FOLLOWING along with the numbers in a box.
How do I get the MEDIA, FOLLOWERS, and FOLLOWING along with the numbers in each box.
I cant seem to line up the text where I want it on the page either. I was told not to put the text in CSS so how do I put it all
I have attached my code, please let me know how it looks so far.
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
font-family: serif;
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: bold;
line-height: 1.3;
}
img {
max-width: 100%
margin-bottom: 20px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
.flex-item {
color: black;
font-size: 14px;
font-weight: bold;
}
/* Main Styles --------------------- */
.main-header {
background-color: blue;
padding-top: 20px;
height: 300px;
box-sizing: border-box;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.main-footer {
padding-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #ffa949;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary-content,
.secondary-content {
width:10%;
box-sizing: border-;
padding-left: 10px;
padding-right: 50px;
margin: left-side;
max-width: 50px;
}
.box {
background: url(igbodybuildingworld2.jpg);
background-size: 150px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 300px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 1px solid black;
height: 400px;
}
.box2 {
background: url(absmotivation1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box3 {
background: url(instafitnesslifestyle1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box4 {
background: url(absinspiration1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box5 {
background: url(gymcomedy1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box6 {
background: url(instafitnesstransformations2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box7 {
background: url(motivation2squat2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box8 {
background: url(fitness_lifestyle202.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box9 {
background: url(gymlife222.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
.ad-left {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Instagram Shoutouts</title>
<link rel="stylesheet" href="Instagrampage.css">
</head>
<body>
<header id="top" class="main-header">
<h1>Instagram Shoutouts</h1>
<span class="title">Increase followers with instagram shoutouts!</span>
</header>
<p>igbodybuildingworld<br>MEDIA FOLLOWERS FOLLOWING<br>101 32K 321<br>Select Options</p>
</body>
</html>
<div class="box"></div>
<div class="box2">absmotivation101</div>
<div class="box3">instafitnesslifestyle101</div>
<div class="box4">absinspiration101</div>
<div class="box5">gymcomedy101</div>
<div class="box6">instafitnesstransformations</div>
<div class="box7">motivation2squat</div>
<div class="box8">fitness_lifestyle20</div>
<div class="box9">gymlife22</div>
</div>
</div><!-- End .secondary-content -->
<html>
<head>
</head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 280px;
height: 400px;
background-color: white;
border: 0px solid black;
}
.flex-item {
background-color: white;
padding-top: 5px;
border: 1px solid black;
text-align: center;
width: 100px;
height: 50px;
margin:5px;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">MEDIA</div>
<div class="flex-item">FOLLOWERS</div>
<div class="flex-item">FOLLOWING</div>
</div>
</body>
</html>
I don't know what exactly you want but it may like below code
<html><head>
<style>
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
font-family: serif;
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: bold;
line-height: 1.3;
}
img {
max-width: 100%
margin-bottom: 20px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
.flex-item {
color: black;
font-size: 14px;
font-weight: bold;
float: left;
width: 33.3%;
text-align: center;
}
.flex-container {
width: 100%;
display: table;
}
/* Main Styles --------------------- */
.main-header {
background-color: blue;
padding-top: 20px;
height: 300px;
box-sizing: border-box;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.main-footer {
padding-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #ffa949;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary-content,
.secondary-content {
width:10%;
box-sizing: border-;
padding-left: 10px;
padding-right: 50px;
margin: left-side;
max-width: 50px;
}
.box {
background: url(igbodybuildingworld2.jpg);
background-size: 150px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 300px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 1px solid black;
height: 400px;
}
.box2 {
background: url(absmotivation1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box3 {
background: url(instafitnesslifestyle1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box4 {
background: url(absinspiration1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box5 {
background: url(gymcomedy1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box6 {
background: url(instafitnesstransformations2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box7 {
background: url(motivation2squat2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box8 {
background: url(fitness_lifestyle202.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box9 {
background: url(gymlife222.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
.ad-left {
float: left;
}
</style>
</head>
<body>
<title>Instagram Shoutouts</title>
<link rel="stylesheet" href="Instagrampage.css">
<header id="top" class="main-header">
<h1>Instagram Shoutouts</h1>
<span class="title">Increase followers with instagram shoutouts</span>
</header>
<p>igbodybuildingworld
<br>
MEDIA FOLLOWERS FOLLOWING
<br>
101 32K 321
<br>
Select Options</p>
<div class="box"></div>
<div class="box2">absmotivation101</div>
<div class="box3">instafitnesslifestyle101</div>
<div class="box4">absinspiration101</div>
<div class="box5">gymcomedy101</div>
<div class="box6">instafitnesstransformations</div>
<div class="box7">motivation2squat</div>
<div class="box8">fitness_lifestyle20</div>
<div class="box9">gymlife22</div>
<div class="flex-container">
<div class="flex-item"><p>12K</p><p>MEDIA</p></div>
<div class="flex-item"><p>12K</p><p>FOLLOWERS</p></div>
<div class="flex-item"><p>24K</p><p>FOLLOWING</p></div>
</div>
<script type="text/javascript">
</script>
</body></html>
Check this out I tried to center this inline-block but it is not working :( . I read couple of answer about similar issue but the solution; adding width and centering text is not working. Bellow is the codes. above is the codepen.
HTML:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download">DOWNLOAD NOW
</div>
<div class="footer">footer</div>
</div>
In order for text-align to work you need to specify it on a container, that container, in turn, will have centered text. Right now you have set text-align: center on the actual element you want centered.
EDIT:
Sample css:
.download {
text-align: center;
}
.download a {
color: #ffffff;
text-decoration: none;
width: 220px;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
This makes it so your .download-element works as awrapper telling everyting inside it to be centered. Than it applies your styling of the button to the <a/>-tag only.
EDIT 2:
For everyone recommending additional wrapper divs. Please don't. The link already has a wrapper and this HTML has the correct amount of elements (I would even argue one too many). It still has about 100% too many css-classes...
Unrelated to the question: This layout really looks like a table. No point in avoiding the <table/>-tag if the content is actually supposed to be a table of data.
Updated code
Give text-align: center to a parent element.
HTML
<div class="center">
<div class="download">DOWNLOAD NOW</div>
</div>
CSS
.center {
text-align: center
}
Wrap your download button in a container, and give the container the
text-align:center;
property:
body {
background: #34495e;
padding: 50px 0px;
}
.left.end {
border-bottom: 8px solid #8e44ad;
}
.right.end {
border-bottom: 8px solid #d35400;
}
.container {
background: #ecf0f1;
min-height: 480px;
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.container h1 {
margin: 0px;
padding: 0px;
}
.right,
.left {
display: inline-block;
padding: 15px;
Font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
background: #2c3e50;
border-bottom: 1px solid #34495e;
}
.right {
width: 80%;
background: #16a085;
border-bottom: 1px solid #1abc9c;
}
.hright,
.hleft {
display: inline-block;
font-weight: bold;
font-size: 20px;
color: #fff;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.hleft {
width: 20%;
background: #c0392b;
border-bottom: 1px solid #e74c3c;
line-height: 100px;
text-align: center;
}
.hright {
width: 80%;
background: #27ae60;
border-bottom: 1px solid #2ecc71;
padding-left: 10px;
line-height: 100px
}
.download {
width: 220px;
text-align: center;
margin: 0px auto;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
font-family: Georgia;
font-size: 20px;
background: #2980b9;
padding: 25px 30px 25px 30px;
display: inline-block;
}
.download a {
color: #ffffff;
text-decoration: none;
}
.footer {
text-align: justify;
padding: 16px;
background: #2c3e50;
color: #7f8c8d;
}
.download-container{
text-align:center;
}
<div class="container">
<div class="hleft">Back</div>
<div class="hright">
<h1>Drive Nuts</h1>
</div>
<div class="left">Size</div>
<div class="right">ID</div>
<div class="left">ID</div>
<div class="right">Datas</div>
<div class="left end">Hits</div>
<div class="right end">Datas</div>
<div class="download-container">
<div class="download">DOWNLOAD NOW
</div>
</div>
<div class="footer">footer</div>
</div>
I'm making a 'topic' design, and I am having issues again. I have a floating div (to the left) inside a container div and it's going outside of it's boundries. It's dynamic, so setting a height: property will not suffice. Now I know it's the float: left; that's causing it, but how can I try fitting in it? I tried setting outer div to display: table; which works, but then it doesn't set the other div next to the floating one to fill the width.
html:
<div class="reply-wrapper">
<div class="reply-box">
<div class="reply-header">
<span id="post-id">#1</span>
<span id="post-date">Today, 12:08</span>
</div>
<div class="reply-main">
<div class="user-info">
<div class="username-wrap">
<span id="username">Jakes625</span>
<!-- img online or not? -->
</div>
<span id="usertitle">Admin</span>
<ul class="user-stats">
<li>Posts: 99</li>
<li>Rep: 99</li>
<li>Likes: 99</li>
</ul>
</div>
<div class="reply-data">
<div class="reply-post">
<h2>Post Title</h2>
<p>
So this is some text that goes in a post.
</p>
</div>
<div class="reply-signature">
This is an example signature.
</div>
</div>
</div>
<div class="reply-footer">
<span class="reply-button">Reply With Quote</span>
</div>
</div>
</div>
css:
.reply-wrapper{
background-color: #DDD;
border-radius: 6px;
padding: 6px;
font: normal 12px arial, helvetica, sans-serif;
color: #333;
}
.reply-box{
border: 1px solid #c6c6c6;
border-radius: 4px;
margin-bottom: 30px;
}
.reply-box:last-child{
margin-bottom: 0;
}
.reply-header{
background-color: #474747;
border-bottom: 1px solid #c6c6c6;
border-radius: 4px 4px 0 0;
padding: 4px;
color: #FFF;
}
.reply-header #post-id{
float: right;
}
.reply-main{
background-color: #ebebeb;
}
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
.user-info .username-wrap,.user-info #usertitle{
text-align: center;
display: block;
text-align: center;
}
.username-wrap #username{
font-size: 11pt;
}
.user-stats{
margin: 0;
padding: 0;
list-style-type: none;
margin: 10px 0 10px 0;
}
.user-stats li{
background: #f2f2f2 none;
color: #3e3e3e;
border: 1px solid #c6c6c6;
margin-bottom: 3px;
padding: 4px;
line-height: 20px;
}
.reply-post{
padding: 10px;
}
.reply-post h2{
margin: 0;
padding: 0;
border-bottom: 1px solid black;
}
.reply-signature{
border-top: 1px solid #c6c6c6;
padding: 10px;
}
.reply-footer{
padding: 4px;
height: 15px;
background-color: #d8d8d8;
border-top: 1px solid #c6c6c6;
}
.reply-footer .reply-button{
float: right;
}
PAGE SOURCE: http://jakes625.toomanylols.com/thread.html
change:
.reply-main .user-info{
width: 180px;
float: left;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
}
to:
.reply-main .user-info{
width: 180px;
display: inline-block;
background-color: #e5e5e5;
border-right: 1px solid #c6c6c6;
padding: 10px;
}
.reply-main .reply-data{
margin-left: 200px;
margin-right: 0px;
display: inline-block;
}
This will display both divs side by side, while stretching the outer div to make them fit. If what you want is the contrary (make the div's height equal the outer div's height, regardless of it's content) then the other posted answer is what you're looking for
jsfiddle here
Overflow hidden the reply-wrapper part (the outter container)
CSS
.reply-wrapper {
background-color: #DDDDDD;
border-radius: 6px 6px 6px 6px;
color: #333333;
font: 12px arial,helvetica,sans-serif;
padding: 6px;
overflow: hidden;
}
or
.reply-main {
background-color: #EBEBEB;
overflow: hidden;
}
Why is the overflow:auto; on .pageContent breaking the layout in Chrome and Firefox? It works great in Safari. How can I go about fixing it? I added it so the clear:both; on the h2 would only clear the content and not the whole .pageAttributes div too.
Here is the site.
It looks like its the border-bottom on .selected from the menu thats causing it. Still not sure why though.
Update - Test case jsfiddle
I've tried overflow: visible; but that breaks the h2.
HTML
<div class="page">
<div class="pageAttributes">
.pageAttributes
</div>
<div class="pageMenu">
<div class="button">View</div>
<div class="button selected">Edit</div>
<div class="button">Talk</div>
<div class="search">Search:
<input type="text" id="searchItem">
</div>
</div>
<div class="pageContent">
<h2>header</h2>
.pageContent
<div class="pageFooter"></div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
float: left;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
clear: right;
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: relative;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
Try this,
#articleSections{
float: left;
}
and remove the overflow: auto; from .pageContent
to me it seems to be a floating problem wich I could not clear between the .button(s) and the search input. so positioning could be a solution like this
fiddle http://jsfiddle.net/LNMH9/3/
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
position:relative;
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
position:absolute;
left:0px;
top:0px;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: absolute;
width:748px;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
</style>
<div class="page">
<div class="pageAttributes">
.pageAttributes
</div>
<div class="pageMenu">
<div class="button">View</div>
<div class="button selected">Edit</div>
<div class="button">Talk</div>
<div class="search">Search:
<input type="text" id="searchItem" />
</div>
<div style="clear:both;"></div>
</div>
<div class="pageContent">
<h2>header</h2>
Lorem ipsum
<div class="pageFooter"></div>
</div>
</div>