• 0

CSS Problem


Question

Hello there~ So I have this problem of adding two small content boxes below the content of this sample layout.

It's a three column layout and below it's content has 2 small boxes.

I've managed to make the basic 3 column layout with the header, footer, and the sidebar-- plus the content, but the 2 small boxes beneath the content still bugs me out.

I cant seem to implement this small content box. Can anyone tell me what's the code for the two small boxes beneath it? Help would be appreciated :)

Here's what it was suppose to look like:

theproblem.jpg

Here's what i've done so far:

productsofar.jpg

The html code:

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="miki.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<div class="header"></div>
<div class="sidebar_left"> </div>
<div class="content"> </div>
<div class="sidebar_right"> </div>
<div class="footer"> </div>
</div>


</body>

</html>

The Css

.container
{

	margin:auto;
	height:600px;
	width:800px;
}
body{
	background:#0099CC;
}

.header
{
	background:gray;
	top:30px;
	height:80px;
	width:auto;
}
.sidebar_left
{

	background:maroon;
 	float:left;
	width:200px;
	display: inline;
	height:500px;
}
.sidebar_right
{
	background:maroon;
	float:right;
	width:200px;
	display: inline;
	height:500px;
}
.content
{
	background: white;
	float: left;
	width: 395px;
	height:300px;
	padding-left: 5px;
}

.footer
{
	background:gray;
	width:auto;
	clear:both;
}

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Is this the code you need? I deleted some of your CSS as you didn't need a bit of it.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="miki.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="header"></div>
    <div class="sidebar_right"></div>    
    <div class="content"></div>
    <div class="content">
      <div class="content_right"></div>
      <div class="content_left"></div>
    </div>
  <div class="sidebar_left"></div>
  <div class="footer">hi</div>
</div>

</body>
</html>

body {
    background-color:#0099CC;
    margin:20px auto;
    height:600px;
    width:800px;
}

.header {
    background:gray;
    height:80px;
}

.sidebar_left, .sidebar_right {        
    background:maroon;
    height:500px;
    width:200px;	
}

.sidebar_right {
    float:right;
}

.content {
    background:white;
    float:right;
    height:250px;
    width:400px;        
}

.content_left, .content_right {
    background:blue;
    height:250px;
    width:200px;
}

.content_right {
    background:green;
    float:right;
}

.footer {
    background:gray;
    height:100px;
}

Link to comment
Share on other sites

  • 0

Wrap your .content box in another div and move the float:left; to that parent, taking it off of .content. Now just add your boxes below .content but still within the floated parent.

Like this:

<div id="wrapper">
	<div class="content"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

#wrapper {
	float: left;
	width: 400px;
	height: 500px;
}

.content
{
	background: white;
	height:300px;
	padding-left: 5px;
}

.box {
	float: left;
	width: 50%;
	height: 200px;
	background-color: yellow;
}

Link to comment
Share on other sites

  • 0

Is this the code you need? I deleted some of your CSS as you didn't need a bit of it.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="miki.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="header"></div>
    <div class="sidebar_right"></div>    
    <div class="content"></div>
    <div class="content">
      <div class="content_right"></div>
      <div class="content_left"></div>
    </div>
  <div class="sidebar_left"></div>
  <div class="footer">hi</div>
</div>

</body>
</html>

body {
    background-color:#0099CC;
    margin:20px auto;
    height:600px;
    width:800px;
}

.header {
    background:gray;
    height:80px;
}

.sidebar_left, .sidebar_right {        
    background:maroon;
    height:500px;
    width:200px;	
}

.sidebar_right {
    float:right;
}

.content {
    background:white;
    float:right;
    height:250px;
    width:400px;        
}

.content_left, .content_right {
    background:blue;
    height:250px;
    width:200px;
}

.content_right {
    background:green;
    float:right;
}

.footer {
    background:gray;
    height:100px;
}

Wrap your .content box in another div and move the float:left; to that parent, taking it off of .content. Now just add your boxes below .content but still within the floated parent.

Like this:

<div id="wrapper">
	<div class="content"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

#wrapper {
	float: left;
	width: 400px;
	height: 500px;
}

.content
{
	background: white;
	height:300px;
	padding-left: 5px;
}

.box {
	float: left;
	width: 50%;
	height: 200px;
	background-color: yellow;
}

Thanks for the help :D I've learned a lot from the two of you :blush:

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.