making use of space

joe2730

06-11-2012, 11:27 PM

hey, I can't seem to make full use of the space im assigning
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
small, strike, strong, b, u, i, center, div,
dl, dt, dd, ol, ul, li, form, table, thead, tr, th, td,
footer, header, menu, nav {
margin: 0 auto;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
background-color:black;
max-width:1000px;
min-width:1000px;

}

#logo{
float:left;
width:700px;

}

#toprightbox{
float:right;
width:300px;
padding-top:10px;

}
I just can't see what i'm forgetting to do/missed out :confused:
If I give the body tag a width of 1000px then the logo and toprightbox should fit? im having to drop 20px off an image for it to fit.
Also I am floating the toprightbox to the right and the images are staying to the left inside, which is fair enough because I haven't told them to go anywhere, but which would be the best way to get the images in the container to the right, using float again inside the box or just padding from the left?
Any ideas? cheers.

SeattleMicah

06-11-2012, 11:32 PM

just make sure topright box is set to the exact width of your picture

body{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
background-color:black;
width:1000px;

}

#logo{
float:left;
width:700px; <---this width doesnt matter as much as long as it is not larger than 1000px-the exact width of your image

}

#toprightbox{
float:right;
width:.... <--exact width of picture
margin-top:20px;

}

joe2730

06-11-2012, 11:36 PM

it probably wasnt the best way to go around doing it but basically I have two small images that I wanted to the right of the logo, I thought the best way would be creating a div and putting the two images in it and floating the box with the images in to the right of the logo?

SeattleMicah

06-11-2012, 11:37 PM

do you have an image of wha you want?

joe2730

06-11-2012, 11:40 PM

no :( it's basically just a band logo with a small icon for facebook and another for myspace next to it

SeattleMicah

06-11-2012, 11:57 PM

<!DOCTYPE HTML>
<html>
<head>
<title>testing 1 2 3</title>

<STYLE type="text/css">
*{margin:0; padding:0;}
#nav {width:1000px; margin:0 auto; height:50px; background-color:#ccc;}
#logo {width:400px; height:50px; float:left; background-color:#333;}
.fb {width:40px; height:40px; float:right; margin:5px 10px 5px 10px; background-color:#999;}
.twitter {width:40px; height:40px; float:right; margin:5px 10px 5px 10px; background-color:#999;}
</style>
</head>
<body>
<div id="nav">
<div id="logo">LOGO</div>

<div class="fb">FB</div>
<div class="twitter">TWIT</div>

</div>

</body>

</html>

joe2730

06-12-2012, 07:35 AM

Ah I get it put all 3 inside of one thank you :)