0

I'm working a friend's site: http://www.lauraradniecki.com and I'm trying to get the newsletter bar to stay aligned with the body text, even when the browser is resizing. This works fine, if you're scaling down in size, but if you go up, the size between the text and the subscribe box starts to move away from each other. I can't figure out how to get this fixed

#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
float: left;
}

#insideright {
float: right;
margin-right: 12%;
}

#insideright .formsubmit {
margin: -1px 3px 1px 16px;
}

#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}

Sorry if that's confusing- it's my first time posting here.

Eric Novak
  • 67
  • 1
  • 9
  • 1
    Can you be more specific on what you are trying to achieve and what doesn't work? Also, please [don't use `table`s for layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). – Sunyatasattva May 07 '14 at 20:07
  • We need to see the HtML asweel. Could you make a JSfiddle.net example? – Paulie_D May 07 '14 at 20:08
  • you need to wrap it in a container, make the width the same size as the body content (which is 1080px) and set margin:auto – jmore009 May 07 '14 at 20:08

2 Answers2

0

I would put the newsletter bar text in a container that is the same size as the body text container. Then set the left and right margins just the same as the body text containers.

Essentially you would make a smaller version of the main content container inside itself.

Rudees All Around
  • 51
  • 3
  • This and what Jmoore009 added really helped- I can't believe I missed that! The only thing that I need to figure out is how to make the box resize if the browser resizes- I suspect that's going to be some percentage based coding. – Eric Novak May 07 '14 at 22:34
  • Exactly...use percentages or ems for your widths for the box resize when the viewport resizes. – Rudees All Around May 09 '14 at 19:12
0

Assuming from your explanation and code the inside styles should be IN the subscribe id...

#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
left: 0px;
position: absolute;
}

#insideright {
right: 0px;
margin-right: 12%;
position: absolute;
}

#insideright .formsubmit {
background: #ccc;
position: absolute;
right: 0px;
}

#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
GTodorov
  • 1,993
  • 21
  • 24