Getting my text to line up right

In the following site I have an image at the top left of the screen and a black bar that the same height in pixels as the picture but that extends all the way to the right of page. I also want to be able to place some text in the center of the black bar, so it would be half way between the image and the right side of the browser and in the middle vertically of the black bar. My problem is that when I wrap my text up in my div it goes away completely, and my bar extends past the right side of the screen creating the horizontal side bar at the bottom of browser. Any ideas?


Nav bar on the left with a responsve logo on the right

I have a navbar at the top of each page with a list of elements all with float: left; applied to them. I then have a company logo floating on the right hand side of the nav bar. The issue is that if I make the window too small, the logo will move underneath the list items, I need it to shrink in size.

I do have media queries for mobile devices, but this is when the screen is still too large for a mobile device. I may also mention that the number of items on the menu bar can change, so a media query for this is not suitable.

Spacing between header div and nav div???


I read answers about almost the same problem that I have with my css, but it do not solve my problem... So I had to ask it this way...
I have almost classical CSS structure, with divs as container, header, nav, ext... But space between header div and nav div is always there regardless what I had tried. ?????


ul, li {list-style: none;}
H3 {
color: #999999;
H2 {
color: #999999;
a {
color: #FFF000;
text-decoration: none;
body {
font: small Helvetica, Arial, sans-serif;
margin: auto;
color: #FFFFFF;

Backroung hiding behind other modules

I have a basic blogp with a 2 column layout. One for the content (left), anothe column for "latest articles" and other stuff (right). I wish to add a background image, but it is giving me problems.

Correctly setting the height of row of elements

I am having difficulty setting the height of a row of header elements. The row contains a logo image and a dynamic SVG animation created by D3. At present the row is about twice as tall as the elements it contains. I've spend about 2 hours testing all combinations of css I can think of (height: 200px etc) but nothing works. I'd be grateful if someone could have a look at the page and tell me what I'm missing.

Here is the page

Syndicate content