I am creating an iframe with a header, two list items side by side, and a button.
However, I cannot get said list items to go side by side, neither can I get them to always fill the width of the screen and have equal width.
Here's my code:
/** GLOBAL **/
.iframe-style {
height: 480px;
border: solid;
border-width: 1px;
}
.iframe_header {
color: black;
display: block;
font-family: "Roboto" sans-serif;
border-width: 1px;
}
.iframe_header h1 {
padding-top: 10px;
padding-left: 40px;
font-weight: normal;
}
.iframe-style .separator {
height: 1px;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 1);
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.09);
}
/** NEWS (n) */
/ .n ul {
padding: 0px px 0px 0px;
margin: 0;
white-space: nowrap;
}
.n li {
display: inline-block;
}
.n_content {
height: 300px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 50%;
}
.n_content h2,
p {
font-family: "Roboto" sans-serif;
}
.path {
display: inline-block;
}
/** BUTTONS **/
.n_button {
outline: none;
position: relative;
bottom: -50px;
left: 40px;
}
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
<link href="iframe.css" rel="stylesheet" type="text/css">
</head>
<body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
<div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
<span class="iframe_header"><h1>Welcome back!</h1></span>
<div class="separator"></div>
<ul class="n">
<li>
<span class="n_content"><h2>News</h2><p>
Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
</span>
</li>
<li>
<span class="n_content"><h2>Header 2</h2>
<p>Test</p> </span>
</li>
</ul>
<button class="n_button">START COMMENTING</button>
</div>
</body>
So what am I doing wrong?
Try using float left.
/** GLOBAL **/
.iframe-style {
height: 480px;
border: solid;
border-width: 1px;
}
.iframe_header {
color: black;
display: block;
font-family: "Roboto" sans-serif;
border-width: 1px;
}
.iframe_header h1 {
padding-top: 10px;
padding-left: 40px;
font-weight: normal;
}
.iframe-style .separator {
height: 1px;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 1);
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.09);
}
/** NEWS (n) *//
.n ul {
padding: 0px px 0px 0px;
margin: 0;
white-space: nowrap;
}
.n li {
float : left;
width: 50%;
}
.n_content {
height: 300px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 50%;
}
.n_content h2,p {
font-family: "Roboto" sans-serif;
}
.path {
display: inline-block;
}
/** BUTTONS **/
.n_button {
outline: none;
position: relative;
bottom: -50px;
left: 40px;
}
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
<link href="iframe.css" rel="stylesheet" type="text/css">
</head>
<body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
<div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
<span class="iframe_header"><h1>Welcome back!</h1></span>
<div class="separator"></div>
<ul class="n">
<li>
<span class="n_content"><h2>News</h2><p>
Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
</span>
</li>
<li>
<span class="n_content"><h2>Header 2</h2>
<p>Test</p> </span>
</li>
</ul>
<button class="n_button">START COMMENTING</button>
</div>
</body>
Related
This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
Really not sure why this is happening, but it's very annoying as I can't seem to find the cause of it.
If I take the below HTML and add a P element inside the class="comments" div then it'll push down the entire class="ratingComments" div that it's inside. Even if I turn off margins and padding it'll still do it, why is this?
It'll probably make more sense to look at this fiddle: https://jsfiddle.net/sz4fodqj/
I want the two divs in the center to be inline, but the P tag prevents this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nrthrn</title>
<link rel="icon" href="./res/icon.png">
<link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">
</head>
<div id="wrapper">
<body>
<div class="headerBar">
<img id="logo" src="./res/logo.png"/>
<ul class="menu">
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<a id="loginLink" href="login.html">Login</a>
</div> <!-- end headerBar -->
<div class="promoArea">
<img id="bigLogo" src="./res/bigLogo.png"/>
</div>
<div class="eventsSearchBar">
<p>Order By: </p>
<select required="required" name="field4" class="selectfield">
<option value="Advertise">Closest Date</option>
<option value="Partnership">Furthest Date</option>
<option value="General Question">Rating: High to Low</option>
<option value="General Question">Rating: Low to High</option>
</select>
</div>
<div class="pastEventsContentArea">
<div class="pastEventRowContainer">
<div class="pastEventContainer">
<div class="dateWrapper">
<span class="day"><p id="daytext"><b>23rd</b></p></span>
<span class="month"><p id="monthtext"><b>May</b></p></span>
</div>
<div class="textWrapper">
<div class="title"><p id="eventTitle">ODESZA</p></div>
<div class="location"><p>Location</p></div>
</div>
<div class="buttonWrapper">
<button id="moreInfoButton">Info</button>
<button id="moreInfoButton">Tickets</button>
</div>
</div>
<div class="ratingComment">
<div class="rating">
</div>
<div class="comments"><!--P CLASS HERE MAKES WEIRD THINGS HAPPEN--></div>
</div>
</div>
</div>
<div class="footerBar">
<div class="footerLeft">
<ul>
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="footerRight">
<img src="./res/facebook.png"/>
<img src="./res/twitter.png"/>
<img src="./res/instagram.png"/>
</div>
</div>
<p id="copyright">Copyright 2017</p>
</body>
</div>
</html>
CSS
.pastEventsContentArea{
width: 95%;
margin: 50px auto 50px auto; /*top right bottom left */
padding-top: 20px;
/* background-color: #ff6464;*/
text-align: center;
}
.pastEventContainer{
/*width: 45%;
height: 30%;*/
/* width: 55%;*/
height: 120px;
/* background-color: rgba(0, 0, 0, 0.2);*/
background-color: #ffffff;
margin-left: 5%;
margin-right: 0%;
/* margin-bottom: 10px;*/
/* margin-right: 10px;*/
display: inline-block;
min-width: 500px;
max-width: 500px;
color: black;
border-style: solid;
border-color: #363636;
border-width: 1px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.pastEventContainer .dateWrapper{
width: 20%;
/*background-color: rgba(0, 0, 0, 0.4);*/
height: 100%;
float: left;
font-family: opensans;
color: black;
}
.pastEventContainer .textWrapper{
width: 45%;
/* background-color: rgba(0, 0, 0, 0.6);*/
height: 100%;
float: left;
color: black;
font-family: opensans;
margin-left: 10px;
}
.pastEventContainer .buttonWrapper{
width: 30%;
/* background-color: rgba(0, 0, 0, 0.8);*/
height: 100%;
float: left;
}
.pastEventContainer .dateWrapper .day{
display: inline-block;
width: 100%;
height: 60%;
/* background-color: red;*/
font-size: 25px;
font-family: opensans;
}
.pastEventContainer .dateWrapper .month{
display: inline-block;
width: 100%;
height: 40%;
/* background-color: indianred;*/
font-size: 24px;
}
.pastEventContainer .dateWrapper #daytext{
margin-top: 30%;
}
.pastEventContainer .dateWrapper #monthtext{
margin-top: -10%;
}
.pastEventContainer .textWrapper .title{
/* background-color: aqua;*/
height: 50%;
margin: 0;
margin-top: 30px;
font-size: 20px;
overflow: hidden;
}
.pastEventContainer .textWrapper .location{
/* background-color: blue;*/
margin-top: -20px;;
font-size: 14px;
max-height: 30px;
min-height: 30px;
overflow: hidden;
}
.pastEventContainer .textWrapper p{
margin: 0;
text-align: left;
}
.pastEventContainer .buttonWrapper #moreInfoButton{
display: block;
margin-left: auto;
margin-right: auto;
font-family: Porter;
text-transform: uppercase;
background-color: #242424;
height: 30%;
color: white;
outline: 0;
width: 75%;
border: 0;
padding: 10px;
font-size: 15px;
/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top: 10%;
}
.pastEventRowContainer .ratingComment{
display: inline-block;
height: 120px;
background-color: white;
width: 30%;
margin: 0;
margin-left: 50px;
padding: 0;
border-style: solid;
border-color: #363636;
border-width: 1px;
max-width: 300px;
}
.pastEventRowContainer .ratingComment .rating{
/* background-color: red;*/
height: 50%;
display: block;
margin: 0;
}
.pastEventRowContainer .ratingComment .comments{
/* background-color: aqua;*/
height: 50%;
display: block;
text-align: center;
color: black;
font-family: opensans;
font-size: 20px;
position: relative;
}
.pastEventRowContainer .ratingComment a{
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 60px;
top: 15px;
text-decoration: none;
}
p is block level element by default. You can use span instead or change the display properties of .comments in your css. This really depends on what you want to add in the div.
see
https://www.w3schools.com/html/html_blocks.asp
I think that the reason is that .ratingComment has display: inline-block;. That forces the elements to change so that whatever elements you put inside .comments to be inline with the .pastEventContainer. Look at this for example https://jsfiddle.net/sz4fodqj/4/ where the div contains more text, still it's inline with the first div.
Suppose that I have a content div like this:
<div id="content">
</div>
I would like to know if it is possible with CSS to style this div to have a minimum height (let's say 700px, for example) and all the content that is placed inside this div will only stretch (making its height longer) the div if the sum of the height of its content is greater than the div's height.
I tried using the min-height attribute, but it simply didn't work. All content that I place inside the div makes it longer.
UPDATE
This is some page of my application with the css files (the id of the content div in the css files is conteudo) Unfortunatelly my code is not in English, but I think this is irrelevant. If you can spot the bug why the min-height attribute is not working:
acessonegado.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>Grupos de E-mail de Servidores</title>
<link href="resources/css/gruposemailservidores.css" rel="stylesheet" type="text/css" />
<link href="resources/css/layout.css" rel="stylesheet" type="text/css" />
<link href="resources/css/acessonegado.css" rel="stylesheet" type="text/css" /></head><body>
<div id="cabecalho">
<img src="resources/img/ufca.png" alt="Universidade" />
<span>Grupos de E-mail de Servidores</span>
</div>
<form id="form" name="form" method="post" action="/gruposemailservidores/acessonegado.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="usuario">
<div>
ADMIN<br />UNIVERSIDADE
</div>
</div>
<div id="barraTitulo">Acesso Negado
Sair
</div>
<div id="conteudo">
<p>Este aplicativo é de uso exclusivo de servidores da</p>
<p>COORDENADORIA DE INFRAESTRUTURA DE TI</p>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8939669570174810183:-4107362002777505590" autocomplete="off" />
</form>
<div id="rodape">
<p>aaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbb</p>
</div></body>
</html>
gruposemailservidores.css
body
{
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 70%;
}
#cabecalho
{
height: 84px;
background-color: #dde8df;
border-bottom: 1px solid #6f9b76;
}
#cabecalho img
{
position: absolute;
top: 4px;
left: 10px;
}
#cabecalho span
{
position: absolute;
top: 23px;
left: 145px;
font-family: trebuchet ms, arial, sans-serif;
font-size: 240%;
font-weight: bold;
color: rgba(0, 83, 83, 0.8);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}
#rodape
{
font-size: 90%;
color: white;
background-color: #6f9b76;
text-align: center;
padding: 10px 0;
}
#rodape p
{
margin: 0;
}
#rodape p:first-child
{
margin-bottom: 2px;
}
input, select, textarea, button
{
font-family: inherit;
font-size: 100%;
}
input[type="submit"], input[type="button"]
{
border: 1px solid;
}
.ui-dialog
{
box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
}
.ui-dialog #iconeAlerta
{
float: left;
margin: 0 7px 10px 0;
}
.ui-dialog #emailGrupoSetor
{
font-style: italic;
}
layout.css
#form #usuario
{
position: absolute;
height: 84px;
top: 0;
margin-right: 10px;
right: 0;
font-size: 105%;
color: #608a66;
}
#form #usuario div
{
height: 84px;
display: table-cell;
vertical-align: middle;
}
#form #barraTitulo
{
color: white;
font-size: 130%;
font-weight: bold;
background-color: #6f9b76;
margin: 0;
padding: 2px 10px;
}
#form #barraTitulo a
{
float: right;
color: white;
font-size: 75%;
font-weight: normal;
text-decoration: underline;
}
#form #conteudo
{
margin: 5px 10px;
min-height: 750px;
}
acessonegado.css
#conteudo p
{
text-align: center;
font-size: 180%;
}
#conteudo p:first-of-type
{
/* Comment the margin-top attribute and the height of the #conteudo div will change. It shouldn't. */
margin-top: 150px;
margin-bottom: 10px;
}
#conteudo p:last-of-type
{
margin: 0;
color: #004182;
}
Using min-height works just fine. see fiddle: http://jsfiddle.net/1g1pdqbc/6/
div {
min-height: 100px;
background-color: blue;
width: 100px;
}
The both divs are set to min-height: 100px but the second div has extra stuff in it and makes it taller.
This might be helpful
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
</div>
<br/>
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
<div style = "min-height:100px; background-color:blue" id="content">
inner div with 100px height
</div>
<div style = "min-height:100px; background-color:green" id="content">
inner div 3 with 100px height
</div>
</div>
I am working with a landing page that has a blue hero arrow pointing down in the content areas. I want to make it center align whenever the user minimizes the browser window size, but I cannot seem to do it with my current setup.
* {
margin: 0px;
}
body {
width: 1024;
border-size: 3px;
border-color: gray;
}
/*Blue header*/
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
width: 1024px;
position: relative;
margin: 0 auto;
}
#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
width: 1024px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}
/*CTA Rectangle and form*/
#cta-rectangle {
background-color: rgb(224, 223, 223);
box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
position: relative;
width: 451px;
height: 334px;
z-index: 2;
margin: 40px auto;
}
/*Hero separator and testimonial text*/
.hero {
position:relative;
background-color: rgb(104, 115, 251);
height:128px;
width:1024px;
margin: 0 auto;
text-align:center;
}
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px rgb(104, 115, 251);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero-quote {
font-size: 26px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-style: italic;
line-height: 1.2;
text-align: center;
position: absolute;
width: 989px;
height: 88px;
padding-top: 15px;
}
/*Body content and images*/
.body-container {
width: 1024px;
margin: 0 auto;
margin-top: 60px;
}
.body-container h1 {
font-size: 36px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
}
.text-container-1 {
max-width: 544px;
}
.text-container-1 p {
font-size: 18px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
padding-top: 8px;
padding-left: 4px;
}
/*Check marks and header*/
.check-mark-header {
background-color: rgb(224, 223, 223);
position: relative;
width: 907px;
text-align: center;
margin: 0 auto;
}
.check-mark-header h1 {
font-size: 30px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webinar Event Landing Page by Eric Conklin">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<!--Blue Header-->
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<!--Header image and form-->
<div id="header-bg" align="center">
<div id="cta-rectangle">
<h1>Hello!</h1>
</div>
</div>
<!--Hero-->
<div class="hero">
<h1 class="hero-quote">“I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!” <br> -Jim Smith</h1>
</div>
<!--Section for content-->
<section class = "body-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/jane.png" />
</div>
<div class="col-md-8">
<div class="text-container-1">
<h1>Hello! My Name is Jane Smith!</h1><br><br>
<p>I’m an experienced and certified AdWords professional. I lead a monthly mastermind group of like-minded business owners and consultants. We use webinars to teach the principals of campaign development, including keyword research, split-testing, tracking, reporting and optimization.</p><br>
<p>Going it alone is rough and boring. We lead these webinars as a free training and networking opportunity to help like-minded individuals achieve sucess in their busineses and see results like never before.</p><br>
<p>Not only does this give me the opportunity to teach, it also gives me the opportunity to learn by hearing your story, learning about your business and helping share amazing ideas with fellow entrepreneurs.</p><br>
</div>
</div>
</div>
</div>
</section>
<!--Checkboxes and lower page content-->
<section class="checkmarks">
<div class="check-mark-header" align="center">
<h1>Ready to Get Started? Here's What's Included</h1>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Any tips to help would be great!
There are other issues you'll need to overcome but the basic idea is to set the :after arrow to left: 50% to center it on the page and then use negative margin to shift it back by half its width. Here are the changes.
.hero {
width:100%;
}
.hero:after {
left: 50%;
margin-left: -25px;
}
Example here: http://jsfiddle.net/xf9Lexkq/
Remove most of the explicit widths. Wrap your content in a container, and center your background image.
html
<div class="container">
<!--Blue Header-->
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<!--Header image and form-->
<div id="header-bg" align="center">
<div id="cta-rectangle">
<h1>Hello!</h1>
</div>
</div>
<!--Hero-->
<div class="hero">
<h1 class="hero-quote">“I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!” <br> -Jim Smith</h1>
</div>
<!--Section for content-->
<section class="body-container">
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/jane.png" />
</div>
<div class="col-md-8">
<div class="text-container-1">
<h1>Hello! My Name is Jane Smith!</h1><br><br>
<p>I’m an experienced and certified AdWords professional. I lead a monthly mastermind group of like-minded business owners and consultants. We use webinars to teach the principals of campaign development, including keyword research, split-testing, tracking, reporting and optimization.</p><br>
<p>Going it alone is rough and boring. We lead these webinars as a free training and networking opportunity to help like-minded individuals achieve sucess in their busineses and see results like never before.</p><br>
<p>Not only does this give me the opportunity to teach, it also gives me the opportunity to learn by hearing your story, learning about your business and helping share amazing ideas with fellow entrepreneurs.</p><br>
</div>
</div>
</div>
</div>
</section>
<!--Checkboxes and lower page content-->
<section class="checkmarks">
<div class="check-mark-header" align="center">
<h1>Ready to Get Started? Here's What's Included</h1>
</div>
</section>
</div>
CSS
* {
margin: 0px;
}
body {
border-size: 3px;
border-color: gray;
}
/*Blue header*/
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
position: relative;
margin: 0 auto;
}
#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}
/*CTA Rectangle and form*/
#cta-rectangle {
background-color: rgb(224, 223, 223);
box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
position: relative;
width: 451px;
height: 334px;
z-index: 2;
margin: 40px auto;
}
/*Hero separator and testimonial text*/
.hero {
position:relative;
background-color: rgb(104, 115, 251);
height:128px;
margin: 0 auto;
text-align:center;
}
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px rgb(104, 115, 251);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero-quote {
font-size: 26px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-style: italic;
line-height: 1.2;
text-align: center;
position: absolute;
height: 88px;
padding-top: 15px;
}
/*Body content and images*/
.body-container {
margin: 0 auto;
margin-top: 60px;
}
.body-container h1 {
font-size: 36px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
height: 37px;
margin: 0 auto;
}
.text-container-1 {
max-width: 544px;
}
.text-container-1 p {
font-size: 18px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
padding-top: 8px;
padding-left: 4px;
}
/*Check marks and header*/
.check-mark-header {
background-color: rgb(224, 223, 223);
position: relative;
text-align: center;
margin: 0 auto;
}
.check-mark-header h1 {
font-size: 30px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
height: 37px;
margin: 0 auto;
}
I'm almost finished with this site, and am just now trying to make it cross-browser. It works wonderfully in everything but IE6. I've fixed two of the problems it had, but am lost on the last one. The left sidebar moves right when the window is re-sized to something around 800px. The more you re-size, the more it moves, eventually covering up the content. This also seems to affect the header by shrinking it. The header is a small problem, but mostly just an annoyance.
I've tried a few fixes, but that did nothing. The only thread I could find that relates to this mentions that jQuery may be affecting it, but I have no jQuery set on that div. I'd appreciate any help that is given, as my deadline is approaching.
My HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
Home<br />
<a href="archives.html/" id="none" >Archives</a><br />
About Us<br />
Submit Your Work<br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li>Valentina Cano</li>
<li>Ricky Garni</li>
<li>Kyle Hemmings</li>
<li>Paulus Kapteyn</li>
<li>Tammy Ho Lai-Ming</li>
<li>Laura LeHew</li>
<li>Rhonda Maness</li>
<li>Anita McQueen</li>
<li>Rodney Nelson</li>
<li>Lise Phillips</li>
<li>Changming Yuan</li>
<li>Desmond Kon Zhicheng-Mingdé</li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li>Leila Fortier</li>
<li>Tammy Ho Lai-Ming</li>
<li>Allicia Strickland</li>
<li>Jump Study Photography</li>
<li>Thomas Zimmerman</li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li>March 2011</li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
My CSS:
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }
Simple; dump support for IE 6. Youtube and many other popular sites no longer support it, even Microsoft have abandoned it -- http://ie6countdown.com/