CSS queries

KevinCB · 9 Feb 2007 at 13:34

Hi All,

Got a couple of CSS queries I would like to know the solutions to.

I have created a quick page, but would like to know:-

1. How to wrap text around the class inside the content?
2. How to space the content and navbox div to the same height?

Here's a screenshot from part of the page.

This is the CSS:

Code:

body {
    font-family: Arial;
    font-size: medium;
}

#header {
    height: 100px;
    background-color: #FFFFFF;
    border: solid 1px black;
    color: #000000;
    font-family: Lucida Handwriting;
    font-size: 3em;
}

#content {
	margin-left: 237px;
	padding-left: 10px;
}

.boxpanel {
	margin: 10px;
	height: 100px;
	width: 200px;
	border: solid 1px dashed;
	background-color: #CCCCCC;
	display:block;
}

#navbar {
    height: 35px;
    background-color: #000000;
    color: #FFFFFF;
    padding-left: 20px;
	vertical-align: text-bottom;
}

#navbox {
    float: left;
    height: 175px;
    width: 200px;
    background-color: #CCCCCC;
    padding: 10px;
	margin-top: 10px;
}

#footer {
    height:25px;
    text-align: center;
    background-color: #000000;
    color: #FFFFFF;
    padding-top: 5px;
    font-weight: bold;
}

This is the relevant html source:

Code:

<body>
	<div id="header">
		<img src="images/header.png" height="100px" width="600px" />
	</div>
	<div id="navbar">
		Home | Link 1 | Link 2 | Link 3
	</div>
	<div id="navbox">
		This is a box for additional navigational links.
	</div>
	<div id="content">
		<p>This is where the content of the site goes.</p>
		<p>Hopefully this will work... I have included an additional box (see below), which can be added to the page.
		<br />
		<span class="boxpanel">
		Added additional box to the equation.
		</span>
		</p>
		<br />
		<br />
	</div>
	<div id="footer">
		&copy; 2007 kevincb.co.uk
	</div>
</body>

Thanks

Augmented · 9 Feb 2007 at 14:09

KevinCB said:
1. How to wrap text around the class inside the content?

Use the float property - floating the box either left or right, giving it appropriate margins to create space between the box edges and the wrapped text.

KevinCB said:
2. How to space the content and navbox div to the same height?

Wrap the component <div>s in a container element (e.g. a <div> or use <body>) and apply a background image using the faux-columns technique.

CSS queries

KevinCB

KevinCB

Augmented

Augmented