Please help to vertically align the tittle.
It seems not working properly.
<html>
<body>
<head>
<style type="text/css">
html *
{
margin: 0px;
padding: 0px;}
.Title
{
width: 50%;
display:inline-block;
vertical-align:middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn{
color:white;
background-color:#8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover{
background-color:#A0D468;
}
.btn-next{
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float:right;
}
.btn-prev{
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>
Set a line-height for the paragraph
p {
line-height: 32px;
vertical-align: middle;
}
p {
line-height: 32px;
vertical-align: middle;
}
<head>
<style type="text/css">
html * {
margin: 0px;
padding: 0px;
}
.Title {
width: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn {
color: white;
background-color: #8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover {
background-color: #A0D468;
}
.btn-next {
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float: right;
}
.btn-prev {
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float: left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>
Related
I would like to put a button on 3 images. I made this:
I think my code is very long in my CSS? I often use the property left for each button, is it correct?
I think that I can delete .button_red_02 and .button_red_03?
In my HTML code I have ths:
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
Then, in my CSS code I have this
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
As soon as you have the same CSS specifications for multiple objects, you can use classes and assign these to all of the objects required. In your example you do not need to have the same CSS for each button since all of them have mainly the same properties.
For the positioning I suggest to add unique IDs to each button to handle the positioning individually.
Note that each ID should only be used once (unique identifiers!) within your html template.
To select classed objects, use .classname, to select ID linked objects use #IDname.
Also since your browser reads your CSS file from top to bottom, you can change single properties for each button within its ID selector, for example
#button_red_01 {
background-color: blue;
}
For further insights on classes and IDs I highly recommend the MDN resource https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/class.
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button {
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#button_red_01 {
left: -10px;
top: 150px;
color: #2B28D8;
}
#button_red_02 {
left: 370px;
top: 150px;
}
#button_red_03 {
right: 334px;
top: 150px;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
Basically I am trying out CSS trying to create a chat box for some reason when I float:right the chat message it goes out of the chat box but I when I float:left it works fine as it should be here is the JS Fiddle which shows the problem!
https://jsfiddle.net/g8ax21aa/
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
Thank you for your time and help.
.msg {
word-break: break-all;
}
seems to be the way to go. MDN.
PS. It turns out that break-word is an unofficial value for word-break property and it should be break-all. From caniuse:
Partial support (CSS3 word-break property) refers to supporting the break-all value, but not the keep-all value. Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
So, you are better off using word-break: break-all;
See my code below. I added word-break: break-word;
and it works fine.
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
word-break: break-word;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
you must use
.msg {
width:256px; // add this
word-wrap:break-word;// add this
...//your code
}
Demo in jsfiddle
The problem is that in real life there are no words with that size of characters
try this:
width: 100%;
text-overflow: ellipsis;
I'm trying to vertically align two left and right floated elements in a nav bar. (Where the 'collapsed' nav bar has had the clearfix hack applied). The height of the navbar is determined by the left floated title (h2, 2em by default). However the right floated element, a form with input and button, doesn't sit centrally even when trying the transform approach to vertically centering items?
If I uncomment the transform vertical alignment approach it just sends form further up (not down and centred).
CodePen(https://codepen.io/yunti/pen/xdvpQK)
https://codepen.io/yunti/pen/xdvpQK
.header {
background-color: darkorange;
}
.header-title {
float: left;
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
float: right;
padding-right: 10px;
/*position: relative;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.clearfix:after {
content: "";
clear: both;
display: table;
}
input,
button {
vertical-align: middle;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header clearfix">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
Flexbox makes this really easy. Just add display: flex; justify-content: space-between; align-items: center; to the parent, and that will separate the elements in the parent and align them vertically.
.header {
background-color: darkorange;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
padding-right: 10px;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
Or if you don't want to use flexbox, you can use display: table on the parent, display: table-cell on the children in combination with vertical-align: middle
.header {
background-color: darkorange;
display: table;
width: 100%;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.header-title, .form-header {
vertical-align: middle;
display: table-cell;
}
.form-header {
padding-right: 10px;
text-align: right;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
vertical-align: middle;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
vertical-align: middle;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
You have different amounts of margin on your H1 element ("weather app" -- 22px) and your input/button (10px). Make your margin-top the same on all of these elements.
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>
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>