Please view the following HTML/CSS as a webpage. It displays an outline with borders around the various elements. The containing list intentionally allows for horizontal scrolling within a fixed width. The trouble is that when you scroll to the far right of the outline, you can see that the borders (all hot colors) of the inner elements overlap each other. The desired effect is that they are all perfectly flush (on the right side) with the containing element so that no overlap occurs. What's the most simple CSS to accomplish this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
width: 300px !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
li, span {
padding: 0;
margin: 0;
}
#top {
border: solid 1px black;
}
#top > li {
overflow-x: auto;
overflow-y: hidden;
border: solid 1px yellow;
margin-left: -20px;
}
li {
display: block;
border: solid 1px red;
}
li, ul, span {
width: auto;
white-space: nowrap !important;
}
</style>
</head>
<body>
<ul id='top'>
<li id='trunk'>
<span>This is the trunk</span>
<ul>
<li><span>This is the first line item</span>
<ul>
<li><span>This is the first subitem</span><ul></ul></li>
<li><span>This is the second subitem</span><ul></ul></li>
<li><span>This is the third subitem</span><ul></ul></li>
</ul>
</li>
<li><span>This is the second line item</span><ul></ul></li>
<li><span>This is the third line item</span><ul></ul></li>
</ul>
</li>
</ul>
</body>
</html>
EDIT:
The following image shows a sample outline. Notice that the width is fixed and it can scroll to the right in case the user types a title that is longer than can display in the viewable area. Notice that the highlighted item and it's children are wrapped in light gray. There are some orange markings on the right used for debugging purposes.
http://drop.io/dfhejyj/asset/outline-png
The following image shows that same outline scrolled over to the right. The scrolling is intentional and must not be eliminated. The problem is that when I scroll right the titles protrude outside of the containing UL tag (appearing in light gray). Likewise, with the orange markings. The desired effect is that the orange markings and the gray area would always be flush up agains the right of the select area (delimited by the scroll bar), and that the scrollbar would always remain (so long as any of the titles are long enough to produce it).
http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png
DigruntedGoat's assessment is exactly right. However, I need a corrective approach. This could probably work more easily with the broken box-model used by the old IE browser.
They overlap because each <ul> element is set to 300px width, and it also has a left-padding which creates the "stepped" look. So the first list goes from 0 to 300px horizontally, while the second nested list goes from 20px to 320px, and so on.
I'm not totally sure of the effect you're trying to achieve (maybe you could post a mockup?) but perhaps setting the width on the outermost <ul> only (i.e. the #top selector) would do what you want.
li, span {
overflow: hidden;
}
demo
This is better though:
#top {
width: 300px !important;
}
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
demo
I was finally able to solve this by adding an extra container:
http://jsbin.com/itevo/2
Thanks to Sam H. and DisgruntedGoat who took the time to offer some guidance. :)
Related
I'm making a responsive GitHub Homepage Clone (https://github.com/) with HTML and CSS before moving on to JS. I'm currently working on a search bar. However, when I narrow the screen from the left side, the search bar width stays the same, causing the search bar to leave the entire left navigation bar. Any help would be greatly appreciated :)
P.S. Please view the code snippet at full page view
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
font-family: Helvetica, sans-serif;
}
#left-menu {
background-color: white;
width: 25%;
display: flex;
flex-direction: column;
}
#left-menu-items {
margin: 40px 15px 300px 25px;
width: 85%;
}
#left-menu input {
background-color: transparent;
border: solid 1px #e1e4e8;
border-radius: 5px;
outline: none;
margin-bottom: 20px;
padding: 8px 113px 8px 10px;
}
#left-menu input::placeholder {
color: #d2d5d8;
font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>GitHub Homepage</title>
</head>
<body>
<section id="left-menu">
<div id="left-menu-items">
<input type="search" placeholder="Find a repository...">
</div>
</section>
</body>
</html>
The element I'm working on is the search bar that says "Find a
repository..." In order to allow the box to stretch to the right, I've
added a ton of padding.
Hi, Joshua.
In this case, asking a question with so many parts is hard to answer. If you can create a smaller example - it might help.
<aside class="sidebar">
<input type="search" placeholder="Find a repository">
</aside>
.
.sidebar {
border: 1px solid blue;
padding: 10px;
}
input[type='search'] {
padding: 5px 10px;
font-style: innherit;
}
https://jsfiddle.net/sheriffderek/smnovwqj/
From there - we can help you. You can always ask in the CSS Discord too.
HERE: with the sidebar in tact: https://jsfiddle.net/sheriffderek/e6k8gydu/
Presumably you want the search input to shrink and grow with the page.
To that end, you should use max-width: 300px along with flex-grow: 1 on the <input>.
flex-grow tells the flex-box how to allocate space along its main axis (in this case, the X axis). The value you give it represents a fraction of the parent flex-box. So in this case, if give it the value flex-grow: 1 it will take up as much space as it can, until it runs into another fixed with element, or another element that also has flex-grow set with a nonzero value.
Max-width simply tells the element how large it's allowed to get. You can obviously fine tune this by changing the value, but 300px seemed about right to me.
Put the two together and you no longer need your crazy padding. The input will shrink all the way down to nothing (if you want that to change you also add the min-width property)
and grow all the way up to 300px in this case.
You'll also also want to get rid of the <p> next to your text input. In this scenario, there's no reason at all to use a paragraph, as it has default styling that changes how it behaves. I would use a <div> instead.
After that I would get rid of the relative positioning on nav div p{} and just let flex-box do its magic. If you're trying to position an element in that way, a much better way is with margin. This is what margin is meant to be used for.
Sorry my answer isn't a more specific, but your question is a bit broad.
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
I'm trying to get my top sentence (<p>geornvgowegnoewpgnerognm</p>) to be hidden inside a div and I'm not sure if this is possible but one thing for sure is that the overflow-y style is not working as expected, or maybe I'm doing something terribly wrong. Basically I expect no scroll bar and I get a horizontal one even though Mozilla says it should hide the content horizontally. I'm using Firefox 28 beta but that shouldn't matter no?
Here's the code,
<html>
<head>
</head>
<body>
<style type = "text/css">
#div_1
{
overflow-y:hidden;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color: white;
}
body
{
background-color: black;
}
p
{
font-color: blue;
font-size: 20px;
margin: 0 auto;
}
</style>
<div id = "div_1">
<p>geornvgowegnoewpgnerognm</p>
<p>eornvgowegnoewpgnerognm</p>
<p>ornvgowegnoewpgnerognm</p>
<p>rnvgowegnoewpgnerognm</p>
<p>nvgowegnoewpgnerognm</p>
<p>vgowegnoewpgnerognm</p>
<p>gowegnoewpgnerognm</p>
<p>owegnoewpgnerognm</p>
<p>wegnoewpgnerognm</p>
<p>egnoewpgnerognm</p>
<p>gnoewpgnerognm</p>
<p>noewpgnerognm</p>
<p>oewpgnerognm</p>
<p>ewpgnerognm</p>
<p>wpgnerognm</p>
<p>pgnerognm</p>
<p>gnerognm</p>
<p>nerognm</p>
</div>
</body>
</html>
Another way to do it is
1) Visually hide the paragraph tag. It will keep it's space in the div as though its there, just not visible.
#div_1 p:first-child {visibility: hidden;}
or 2) visually remove the paragraph tag. It look as though it's not there, all other paragraph tags will move up in it's place.
#div_1 p:first-child {display: none;}
To get rid of the horizontal scrollbar, use overflow-x:
overflow-x: hidden;
overflow-y, hides the overflow in the y direction. As in up and down, which would hide a vertical scrollbar.
I'm trying to create a horizontal menu with a thick border bar that shows over the hovered item. However, for some reason there's a small gap at the right end of the bar in Firefox and Chrome. Strangely, IE displays it without the gap. Firebug doesn't show any reason for this gap.
I tried using simple divs and still it appears. I've distilled it down to a single HTML sample, with divs only.
Can anyone explain this and tell me how to get rid of that gap?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Weird border spacing</title>
<style type="text/css">
div.outer
{
border-top: dotted 1px lime;
margin: 10px;
}
div.outer div
{
display: inline;
margin: 0;
padding: 0 12px;
border-left: solid 1px silver;
border-top: solid 3px red;
}
</style>
</head>
<body>
<div class="outer">
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</body>
</html>
I floated the inner div left which fixed the weird spacing and the outer div left which forced the inner div to be inside of it. You can adjust the styles more to fit your needs.
div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
float:left;
margin: 0;
padding: 0 12px;
border-left: 1px solid silver;
border-top: 3px solid red;
}
You could also remove the new lines between the divs to fix just the spaces.
display:inline rarely works well. Consider using float:left instead.
Try to add:
body {
margin: 0;
padding: 0;
}
Browsers have different default values for these CSS properties.
the gap is caused by the breaking space/new line between the <div>. To fix this put all the <div> on the same line with no space between them. However I would recommend re-thinking the css, possibly using list <ul>
The reason you're getting the space is due to inline elements interpreting spaces as something to be rendered. This lets you do:
Hello World
and still have 2 separate words. To remove the space you have to...well, remove the space. When you're trying to put elements flush together for layout, as already mentioned, using float: left is the preferred option.
the declaration display: inline-block for the selector div.outer div may be what you want.
Ok, I had a simple layout problem a week or two ago. Namely sections of a page needed a header:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Pretty simple stuff. Thing is table hatred seems to have taken over in the Web world, which I was reminded of when I asked Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? Now the general topic of tables vs divs/CSS has previously been discussed, for example:
DIV vs Table; and
Tables instead of DIVs.
So this isn't intended to be a general discussion about CSS vs tables for layout. This is simply the solution to one problem. I tried various solutions to the above using CSS including:
Float right for the button or a div containing the button;
Position relative for the button; and
Position relative+absolute.
None of these solutions were satisfactory for different reasons. For example the relative positioning resulted in a z-index issue where my dropdown menu appeared under the content.
So I ended up going back to:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.
So can anyone do the equivalent without tables?
The requirements are:
Backwards compatible: to FF2 and IE6;
Reasonably consistent: across different browsers;
Vertically centered: the button and title are of different heights; and
Flexible: allow reasonably precise control over positioning (padding and/or margin) and styling.
On a side note, I came across a couple of interesting articles today:
Why CSS should not be used for layout; and
Tables vs CSS: CSS Trolls begone
EDIT: Let me elaborate on the float issue. This sort of works:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
Thanks to Ant P for the overflow: hidden part (still don't get why though). Here's where the problem comes in. Say I want the title and button to be vertically centered. This is problematic because the elements are of different height. Compare this to:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
which works perfectly.
There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.
In this case a table worked perfectly.
I personally would have used a table for this.
I think nested tables should be avoided, things can get messy.
Just float left and right and set to clear both and you're done. No need for tables.
Edit: I know that I got a lot of upvotes for this, and I believed I was right. But there are cases where you simply need to have tables. You can try doing everything with CSS and it will work in modern browsers, but if you wish to support older ones... Not to repeat myself, here the related stack overflow thread and rant on my blog.
Edit2: Since older browsers are not that interesting anymore, I'm using Twitter bootstrap for new projects. It's great for most layout needs and does using CSS.
Float title left, float button right, and (here's the part I never knew until recently) - make the container of them both {overflow:hidden}.
That should avoid the z-index problem, anyway. If it doesn't work, and you really need the IE5 support, go ahead and use the table.
This is kind of a trick question: it looks terribly simple until you get to
Say I want the title and button to be vertically centered.
I want to state for the record that yes, vertical centring is difficult in CSS. When people post, and it seems endless on SO, "can you do X in CSS" the answer is almost always "yes" and their whinging seems unjustified. In this case, yes, that one particular thing is hard.
Someone should just edit the entire question down to "is vertical centring problematic in CSS?".
In pure CSS, a working answer will one day be to just use "display:table-cell". Unfortunately that doesn't work across current A-grade browsers, so for all that you might as well use a table if you just want to achieve the same result anyway. At least you'll be sure it works far enough into the past.
Honestly, just use a table if it's easier. It won't hurt.
If the semantics and accessibility of the table element really matter to you, there is a working draft for making your table non-semantic:
http://www.w3.org/TR/wai-aria/#presentation
I think this requires a special DTD beyond XHTML 1.1, which would just stir up the whole text/html vs application/xml debate, so let's not go there.
So, on to your unresolved CSS problem...
To vertically align two elements on their center: it can be done a few different ways, with some obtuse CSS hackery.
If you can fit within the following constraints, then there is a relatively simple way:
The height of the two elements is fixed.
The height of the container is fixed.
The elements will be narrow enough not to overlap (or can be set to a fixed width).
Then you can use absolute positioning with negative margins:
.group-header { height: 50px; position: relative; }
.group-title, .group-buttons { position: absolute; top: 50%; }
# Assuming the height of .group-title is a known 34px
.group-title { left: 0; margin-top: -17px; }
# Assuming the height of .group-buttons is a known 38px
.group-buttons { right: 0; margin-top: -19px; }
But this is pointless in most situations... If you already know the height of the elements, then you can just use floats and add enough margin to position them as needed.
Here is another method which uses the text baseline to vertically align the two columns as inline blocks. The drawback here is that you need to set fixed widths for the columns to fill out the width from the left edge. Because we need to keep the elements locked to a text baseline, we can't just use float:right for the second column. (Instead, we have to make the first column wide enough to push it over.)
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; }
.valign { display: inline-block; vertical-align: middle; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { padding: 8px; width: 384px; }
.group-buttons { padding: 8px; width: 84px; text-align: right; }
</style>
<!--[if lt IE 8]>
<style type="text/css">
.valign { display: inline; margin-top: -2px; padding-top: 1px; }
</style>
<![endif]-->
</head>
<body>
<div class="group-header">
<div class="valign">
<div class="group-title">This is my title.</div>
</div><!-- avoid whitespace between these! --><div class="valign">
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
</div>
<div class="group-content">
<p>And it works perfectly, but mind the hacks.</p>
</div>
</body>
</html>
The HTML: We add .valign wrappers around each column. (Give them a more "semantic" name if it makes you happier.) These need to be kept without whitespace in between or else text spaces will push them apart. (I know it sucks, but that's what you get for being "pure" with the markup and separating it from the presentation layer... Ha!)
The CSS: We use vertical-align:middle to line up the blocks to the text baseline of the group-header element. The different heights of each block will stay vertically centered and push out the height of their container. The widths of the elements need to be calculated to fit the width. Here, they are 400 and 100, minus their horizontal padding.
The IE fixes: Internet Explorer only displays inline-block for natively-inline elements (e.g. span, not div). But, if we give the div hasLayout and then display it inline, it will behave just like inline-block. The margin adjustment is to fix a 1px gap at the top (try adding background colors to the .group-title to see).
I would recommend not using a table in this instance, because that is not tabular data; it's purely presentational to have the button located at the far right. This is what I'd do to duplicate your table structure (change to a different H# to suit where you are in your site's hierarchy):
<style>
.group-header { background: yellow; zoom: 1; padding: 8px; }
.group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* set width appropriately to allow room for button */
.group-header h3 { float: left; width: 300px; }
/* set line-height or margins to align with h3 baseline or middle */
.group-header input { float: right; }
</style>
<div class="group-header">
<h3>This is my title</h3>
<input type="button" value="Collapse"/>
</div>
If you want true vertical alignment in the middle (ie, if the text wraps the button is still middle-aligned with respect to both lines of text), then you either need to do a table or work something with position: absolute and margins. You can add position: relative to your drop-down menu (or more likely its parent) in order to pull it into the same ordering level as the buttons, allowing you to bump it above them with z-index, if it comes to that.
Note that you don't need width: 100% on the div because it's a block-level element, and zoom: 1 makes the div behave like it has a clearfix in IE (other browsers pick up the actual clearfix). You also don't need all those extraneous classes if you're targeting things a bit more specifically, although you might need a wrapper div or span on the button to make positioning easier.
Do a double float in a div and use the clearfix. http://www.webtoolkit.info/css-clearfix.html Do you have any padding/margin restrictions?
<div class="clearfix">
<div style="float:left">Title</div>
<input type="button" value="Button" style="float:right" />
</div>
<div class="group-header">
<input type="button" name="Button" value="Button" style="float:right" />
<span>Title</span>
</div>
I've chose to use Flexbox, because it made things so much easier.
You basically need to go to the parent of the children you want to align and add display:box (prefixed of course). To make them sit in the sides, use justify-content. Space between is the right thing when you have elements which need to be aligned to the end, like in this case (see link)...
Then the vertical align issue. Because I made the parent of the two elements, you want to align a Flexbox. It's easy now to use align-items: center.
Then I added the styles you wanted before, removed the float from the title and button in the header and added a padding:
.group-header, .group-content {
width: 500px;
margin: 0 auto;
}
.group-header{
border: 1px solid red;
background: yellow;
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
padding: 8px 0;
}
.group-content{
border: 1px solid black;
background: #DDD;
}
.group-title {
padding-left: 8px;
}
.group-buttons {
padding-right: 8px
}
See Demo
I agree that one should really only use tables for tabular data, for the simple reason that tables don't show until they're finished loading (no matter how fast that is; it's slower that the CSS method). I do, however, feel that this is the simplest and most elegant solution:
<html>
<head>
<title>stack header</title>
<style type="text/css">
#stackheader {
background-color: #666;
color: #FFF;
width: 410px;
height: 50px;
}
#title {
color: #FFF;
float: left;
padding: 15px 0 0 15px;
}
#button {
color: #FFF;
float: right;
padding: 15px 15px 0 0;
}
</style>
</head>
<body>
<div id="stackheader">
<div id="title">Title</div>
<div id="button">Button</div>
</div>
</body>
</html>
The button function and any extra detail can be styled from this basic form. Apologies for the bad tags.