PDA

View Full Version : stop floating div from wrapping on resize


kt1978
04-04-2010, 06:39 PM
:-) Hi all

First of all this is my first thread so apologies if title is incorrect.

I am new to html and have been putting a site together.

I originally used tables to create the layout, but I read in a post somewhere that tables shouldn't be used for layout... I wan't to obviously do things right so want a point in the right direction please.

If I use a table I can do it, but want to know the correct way.

Here is a sample of the html and css. Basically the left div auto expands and the right div stays the same width but moves with the screen resize.

The bit that doesn't work is that when the screen is resized smaller than the right div wraps below the left div. I want to stop this!!!!

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Daisy Chain Childrens Nursery</title>
<style type="text/css">
<!--
-->
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<div id="header">
<div id="left"><img name="imgTest" src="" width="200" height="150" alt="" /></div>
<div id="right"><img src="" alt="" name="imgTest2" width="250" height="150" id="imgTest2" /></div>
</div>
</div>

</body>
</html>


CSS
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #FFFFFF;
height: 500px;
margin: 50px;
}
#wrapper #header {
height: 150px;
width: 100%;
}
#wrapper #left {
float: left;
height: 150px;
text-align: center;
width: 64%;
}
#wrapper #right {
float: right;
height: 150px;
width: 250px;
}

a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
margin: 20px;
}


Cheers

Kev

domedia
04-04-2010, 07:11 PM
Try using min-width on the wrapper.

#wrapper { min-width: 500px;}

kt1978
04-04-2010, 07:43 PM
Hi

Thanks for your help, that works great.

I didn't realise there was a min-width option. When I create and edit the css styles it is not there but if have found out now that there are actually more options on the css sheet itself.

Thanks again

kt1978
04-04-2010, 08:38 PM
This solved the original problem that I had but I have noticed something else now.

the leftheader which holds my logo should always be in the middle of the remaining space until the resize reaches its smallest.

#wrapper { min-width: 700px;}

the right header is 250px wide so the remaining is 450px (at the smallest i want) which is 64%. Its sits in the middle fine. Soon as I expand it is no longer in the middle.

Two questions (or advice) really.

1, Is there a way to solve the above?

2, For something like this should I be using a table as it is easy to do what I want.

Like I said in my original post I already had this working with tables, but read that you shouldn't use tables for layout.

Thanks