Tyler Foraie
Reputation: 84
Create a layout with div tags and CSS
Im trying to create a layout for a site. I am using three div tags, the container and left and right. I want the left to be a fixed width as it will be the navigation. The right side will display the content. The right side will be loaded in from a database so the content width will need to vary depending on what is loaded. Currently the width will only display up to the width of the window and if you minimize the window the content gets cut off instead of displaying a scroll bar and allowing the user to scroll over to see the rest of the data. As well I also cant get the left and right divs to display together. At one point I had them beside each other but there was a giant gap in the middle which wasn't what I was trying to achieve. I'm just hoping for some help on how to go about achieving the layout. Cheers,
<style> body {
background-color: #E0E0E0;
color: #000000;
}
input[type="text"] {
width: 75px;
}
#wrapper {
padding: 10px;
background-color: #9FF;
/*margin: 0 auto;*/
min-width: 500px;
overflow: auto;
border-radius: 25px;
box-shadow: 10px 10px 5px grey;
border-style: solid;
border-width: 5px;
}
.left {
/*margin:0 auto;*/
padding: 15px;
float: left;
color: #000000;
width: 150px;
border-style: solid;
border-width: 5px;
}
.right {
/*margin:0 auto;*/
padding: 15px;
float: right;
color: #000000;
min-width: 400px;
border-style: solid;
border-width: 5px;
}
</style><!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=utf-8" />
<title>Schedule Design</title>
</head>
<body bgcolor="">
<div id="wrapper">
<div class="left">
<p>This is some text</p>
<p>Here is some more</p>
<p>this is another one</p>
<p>this on is for good measure</p>
</div>
<div class="right">
<form>
<table align="center" cellpadding="5px">
<tr>
<th>Employee</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 56
Answers (2)
CDelaney
Reputation: 1248
If you get rid of float: right; and min-width: 400px; from your .right class, you should get the right pane to stick to the left pane. Also, overflow: auto; will allow your right pane to scroll its width.
<style> body {
background-color: #E0E0E0;
color: #000000;
}
input[type="text"] {
width: 75px;
}
#wrapper {
padding: 10px;
background-color: #9FF;
/*margin: 0 auto;*/
min-width: 500px;
overflow: auto;
border-radius: 25px;
box-shadow: 10px 10px 5px grey;
border-style: solid;
border-width: 5px;
}
.left {
/*margin:0 auto;*/
padding: 15px;
float: left;
color: #000000;
width: 150px;
border-style: solid;
border-width: 5px;
}
.right {
/*margin:0 auto;*/
padding: 15px;
overflow: auto;
color: #000000;
border-style: solid;
border-width: 5px;
}
</style><!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=utf-8" />
<title>Schedule Design</title>
</head>
<body bgcolor="">
<div id="wrapper">
<div class="left">
<p>This is some text</p>
<p>Here is some more</p>
<p>this is another one</p>
<p>this on is for good measure</p>
</div>
<div class="right">
<form>
<table align="center" cellpadding="5px">
<tr>
<th>Employee</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
<tr>
<td>Tyler Foraie</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
<td>
<input type="text" placeholder="Start Time" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>Upvotes: 1
Jan
Reputation: 1
.left{ display:inline-block;}
/* or */
.right{ display:inline-block; }
the Two classes will be inlined
Upvotes: 0
Related Questions
- HTML & CSS Layout
- How to make layout using css and divs?
- HTML layout for a div
- Design page layout using CSS/Div like HTML table
- DIV using CSS layout Basic
- Page layout with HTML and CSS
- Page layout using div tag
- Getting desired layout in html with use of <div>
- Need help creating a layout with DIVs
- How to organize page layout with div's