发表新帖
发表新帖

How to put two divs side by side

前端 未结
关注
8 1093
情深已故
情深已故 2020-12-07 17:20

So I\'m quite new to writing code (about a few weeks) and I\'ve hit a wall while writing code for my website. I want to have a layout like this:

相关标签:
8条回答
  • 暖寄归人
    2020-12-07 18:08

    Based on the layout you gave you can use float left property in css.

    HTML 

    <div id="header"> LOGO</div>
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<div id="clear"></div>
</div>
<div id="footer">Footer</div>

    CSS

    body{
margin:0px;
height: 100%;
}
#header {

background-color: black;
height: 50px;
color: white;
font-size:25px;

 }

#wrap {

margin-left:200px;
margin-top:300px;


 }
#box1 {
width:200px;
float: left;
height: 300px;
background-color: black;
margin-right: 20px;
}
#box2{
width: 200px;
float: left;
height: 300px;
background-color: blue;
}
#clear {
clear: both;
}
#footer {
width: 100%;
background-color: black;
height: 50px;
margin-top:300px;
color: white;
font-size:25px;
position: absolute;
}
    0 讨论(0)
  • 你的背包
    2020-12-07 18:10

    Regarding the width of your website, you'll want to consider using a wrapper class to surround your content (this should help to constrain your element widths and prevent them from expanding too far beyond the content):

    <style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>

    As far as the content boxes go, I would suggest trying to use 

    <style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>

    I would spend some time researching the box-object model and all of the "display" properties. They will be forever helpful. Pay particularly close attention to "inline-block", I use it practically every day.

    0 讨论(0)
 看不清?
提交回复
热议问题