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

css absolute positioning shows different in safari

Hi,

This is racking my brain!
I've tried everything.

The CSS absolute positioning shows different in safari. In Firefox it's perfect.

How do I get it to work in all sites.

Also, the sizing changes the site as well. Is there a way to make it stay the same size despite the browser size?

www.creativejeniusagency.com/bevy/bevy.html

CSS Layout Borders

I have two DIVs side by side enclosed with header and footer DIVs. I want a border between the two DIVS that stretches between the header and footer DIVs.

When I set the right hand DIV to have a left border it works only if the right hand DIV has a greater height. (The height is dynamic according to how much text is placed there. I do not want to move the border on a daily basis as the amount of text changes).

Two examples
http://www.cykeltours.se/test_border1/
Correct: The border goes all the way down. (Because the right hand DIV has a greater height than the left one).

Layout Issue using Float property

Hi All,

Trying to make a simple layout but failed miserably. Need your support to correct it.

What I am trying:
1. Making a main container
2. Dividing the main one into two container : left and right one
3. Putting some button on the right container.

<!DOCTYPE HTML>
<html>
	<head>
		<style>
			#main_c {
				border:1px solid green;
				width:600px;
				float:left;
			}
			#left_d {
				border:1px solid yellow;
				width:450px;
				float:left;
			}
 
			#right_d {
				border:1px solid blue;
				width:150px;
 
			}
 
		</style>
	</head>
	<body>

Trying to Better Understand Grids

I am still new to CSS and have much to learn. I am trying to understand placement in a grid, with say, pictures and then content I want to sit to the left or right of said picture.

Let's say I have a 12 column grid I want to use for my page, each labeled accordingly starting from left to right from 1-12 respectively. So I have a picture I want to left align in column 3 that spans across through column 5. I then want to have column 6 blank and left align some paragraph text that will span columns 7-10. How do I do this?

Syndicate content