A problem with the position of divs


#1

here is my html code

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id='header'>
	        <p>The Site of all sites</p>
	    </div>
	    <div id='left' class='list'></div>
	    <div id='right' class='list'>
	        <p>The beginning ?</p>
	        <ul>
	            <li>yes</li>
	            <li>no</li>
	            <li>who knows</li>
	        </ul>
	    </div>
	    <div id='footer'>
	        <h3>the end</h3>
	    </div>
	</body>
</html>

and here is my css

#header{
    background-color:violet;
    border-radius:5px;
    border:4px solid pink;
    padding:10px;
    height:50px;
    width:90%;
    z-index:1;
    margin: auto;
    
    
}
#right{
    background-color:white;
    border-radius:5px;
    border:4px solid black;
    padding:10px;
    height:300px;
    width:70%;
    float:right
   
}
#left{
    background-color:white;
    border-radius:50px;
    border:4px dashed violet;
    padding:10px;
    width:20%;
    height:300px;
    float:left;
    

}
#footer{
    background-color:violet;
    border-radius:5px;
    border:4px solid pink;
    padding:10px;
    height:30px;
    width:90%;
    clear:both;
    margint:auto
}
.list {
    display: inline-block;
}

the problem is the right and left blocks are never on the same line and 'float' creates a huge gab between them
I want the two blocks to be aligned on the same line with no space in between
any idea how ?


#2

yea, simple float both #left and #right to left, this will put them beside each other. This code is a bit of a mess. I will help you, but please, first insert units of measurments everywhere (there are width/height etcatra which are a 1000 something hight (could be cows), make it 1000px, 1000% or 1000em, what you like (i would choice the first


#3

please check out the changes I have made
and yes float does put them on the same line .. still not next to each other .. there is a space between them
This is how I want the website to look like

I want the two blocks to be next to each other with no space in between and both together take the whole width of the page automatically
instead this is what I have
*will post it in a separate reply
Am I implementing the idea in the wrong way ? is there a better way of doing this ?
or am I on the right track and only need to adjust the percentage of width for the right and left blocks ?


#4


#5

i made some more changes, you can find them here. here are the things i did: i removed body's margin, i gave div a box-sizing: border-box, this makes padding and border part of the width and height of an element (instead of increasing the box)

If you do not want to use this code, you can simple float your #right to the left (float: left), this will close the gap between #left and #right