2 replies [Last post]
funmed
funmed's picture
Offline
newbie
USA
Last seen: 7 years 42 weeks ago
USA
Timezone: GMT-6
Joined: 2013-12-29
Posts: 1
Points: 2

On this page: http://funmedusa.com

I am trying to get the 2 divs (#main-left and #main-right) to sit side by side and take up the entire screen. I have tried to override the css on the container these are in, and some other things, but I can not get this to happen.

I feel I am missing something simple here.

Please help if you can. Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Too much thinking

You're trying to micromanage the layout. HTML+CSS is designed to conform to its available space if you'll let it.

Try these:

img {
  border: 0 none;
  width: 90%;
}
 
#landing-header {
  background: none repeat scroll 0 0 #3E3E3E;
}
 
.top-bar {
  color: #AEAD9B;
  font-size: 14px;
  padding: 7px 0;
  text-align: center;
}
 
#main-left {
  border-right: 3px solid #CD2E8A;
  float: left;
  margin-left: 5%;
  width: 45%;
}
 
#main-right {
  margin-right: 5%;
  overflow: hidden;
  padding-left: 1em;
}
 
#landing-footer {
  background: none repeat scroll 0 0 #E769A6;
  border-top: 7px solid #FFFFFF;
  clear: both;
  overflow: hidden;
}

Not thoroughly tested but should be fairly robust through a range of widths. Notice that a border on the left column replaces the divider div (or whatever you called it). That kind of structuring was deprecated in 1996 or -97. The footer may need refactoring, and you have too many levels of nesting, and nesting the wrong elements. Where are your heading tags (h1-6)?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jeenal
jeenal's picture
Offline
newbie
Last seen: 7 years 42 weeks ago
Timezone: GMT-8
Joined: 2014-01-04
Posts: 0
Points: 1

CSS floating

Hi try out this codding

<html>
<head>
<title>cbtSAM CSS Float image Example</title>
<style type="text/css">
img.floatLeft {
    float: left;
    margin: 4px;
}
img.floatRight {
    float: right;
    margin: 4px;
}
</style>
 
</head>
<body>
<img src="cbtsam_earth_01.jpg" class="floatLeft">
<p>The first image is floated left with margin 4 pixels. </p>
<p>This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph. </p>
 
<hr>
 
<img src="cbtsam_earth_01.jpg" class="floatRight">
<p>The second image is floated right with margin 4 pixels.</p>
<p>This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph.
This is test paragraph. This is test paragraph. This is test paragraph. </p>
</body>
</html>

for proper output you can try out this code on cbtsam.com with online compiler and get the easy solutions