At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul
Related
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I've a quick question for you, I know it should be something simple... Here I have two headers (h1). Each of them contains 1 word and both must be placed next to each other, just like an ordinary phrase, the problems is that I can't center them. They both should be exactly like a title on top and on center of the document. I'm using them both because I'd like to later ' tween ' them with GSAP or something.
.title{
display: inline;
position: top center;
}
#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
//that's on .css side
//html
<h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
This position: top center; line doesn't affect the text in intended way. To illustrate you it looks something like this right now:
| Winter day | | |
*Those markers I've just placed '|' aren't included in the project, it's just for you to understand what is happening.
The best way to do this would be to put them both inside a div, display them as inline-block and give the div the property of text-align: center
HTML
<div class='centered-images'>
<h1 class='title'>Winter</h1>
<h1 class='title'>Day</h1>
</div>
CSS
.centered-images {
text-align: center;
}
.title {
display: inline-block;
size: 18px;
color: lightgray;
}
Here's a jsfiddle to demonstrate.
This is my solution:
<style type="text/css">
.title{
display: inline;
position: top center;
}
#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
</style>
<div style="text-align:center">
<h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
</div>
I have a <h2 class="landing-panel-title> with a <span class="landing-panel-icon-right ion-ios-search-strong> nested inside. The second class on the span comes from a custom icons font called ionicons and is probably not relevant.
This is a header accompanied by an icon. I want to put a margin between the icon and the title (I want the icon on the far right when after text, and the text on the far right when the icon is on the left of the text), that auto expands as much as it can. I tried achieving this with text-align, but so far haven't been able to get it to work.
http://jsfiddle.net/eakfsLr3/
HTML:
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
CSS:
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
width: 100%;
}
.landing-panel-icon-right, .landing-panel-icon-left {
color: #913D88;
font-size: 3em;
}
.landing-panel-icon-right {
text-align: right;
}
.landing-panel-icon-left {
text-align: left;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
Any help is appreciated.
If I understood correctly, you want this? http://jsfiddle.net/sergdenisov/yv2xazjh/1/
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
display: table-cell;
width: 100%;
}
.landing-panel-icon {
display: table-cell;
color: #913D88;
font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
.landing-panel-icon + .landing-panel-title {
text-align: right;
}
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews</h2>
<span class="landing-panel-icon ion-ios-search-strong">Icon</span>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
<h2 class="landing-panel-title">Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results</h2>
<span class="landing-panel-icon ion-clipboard">Icon</span>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
Make your span class as display:inline-block
span {
display:inline-block; /*this enables margins to work*/
margin: 0 10px;
}
Try
.landing-panel-title>span{
width:..px /*set as much required */
display:inline-block;
text-align:center;/* left/right */
}
or if You just want a small margin between them, then put before span element
or if you just want icon to be on the right of the header then-
.landing-panel-title>span{
position:absolute;
right:0;
/* This would make icon always at right */
}
I have html something like this http://jsfiddle.net/nLt9unxa/5/ and I want to place 3 block .number__label, .text__label, and .from__input in one line. .form__input must be align to the right side of form and all 3 elements must be vertical align in one line. How to do this? And I don't want use display: table-cell
And also if you know very good tutorial or book about alignment, where described all possible alignment and receipts how to do it, like cheatsheet, please share link.
you forgot to put : after max-width and min-width in .number__label
DEMO
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width:20%;
min-width:20%;
}
Use vertical-align: middle (or top, or bottom). Here is the fiddle: http://jsfiddle.net/1ddewjxd/
.class
{
vertical-align: middle;
}
to align elements to right set the parent element to text-align: right, and the child elements to text-align: left. You could also float: right, but that can complicate things.
.item__label {
text-align: right;
}
.number__label, text__label, form__input {
text-align: left;
}
Run this code snippet to check whether all your requirements are done or not? also check fiddle
Check CSS Layout or learn from W3School
form {
width:70%;
background-color: #dddddd;
font-size: 20px;
}
.itme__label {
display: block;
}
.form__item {
display: block;
padding: 3px 5px;
}
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width 20%;
min-width 20%;
}
.text__label {
display: inline-block;
background-color: #888888;
max-width: 50%;
}
.form__input {
display: block;
min-width: 20%;
max-width: 20%;
font-size: 1em;
margin-left:120px;
}
<form>
<div class="form__item">
<p>
<label class="item__label">
<span class="number__label">
01 12 31 23 123 2452 34534 5345
</span>
<span class="text__label">
text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
</span>
<input type="text" class="form__input" value="input text">
</input>
</label>
</p>
<div class="errors">
<p class="error">
some error
</p>
</div>
</div>
</form>
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.