See my codepen: http://codepen.io/Chiz/pen/zBWzZB
I want the UL list to be inside the white area on the left side, but for some reason, when I add the UL, it seems to go way out of the white area.
When I remove the UL tag, though, it looks good.
*
{
box-sizing:border-box;
}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
display:inline-block;
padding:0;
margin:0;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
display:inline-block;
padding:0;
margin:0;
}
<div class="container">
<div class="card">
<div class="left">
<div class="leftcontentbox">
<div class="topnav">
<img src=""></src>
<ul>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="headertext">
</div>
<div class="latestarticles">
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
Add a float left to your left card class and a float right to your right card class, here's what i did :
{
box-sizing:border-box;
}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
display:inline-block;
padding:0;
margin:0;
float: left;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
display:inline-block;
padding:0;
margin:0;
float : right;
}
Changing display:inline-block to float:left at .card .left and float:right at .card .right.
Since we have used float on .left and .right. We need to reset the float by adding .fixit class to parent class(.card) of .left and .right
Note: .fixit class code is also included in the CSS
.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}
*
{
box-sizing:border-box;
}
.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}
body
{
background: linear-gradient(to right, #f4f4f4 0%,#848484 80%);
}
.container
{
width:100%;
height:100vh;
position:relative;
}
.card
{
width:70%;
height:500px;
background-color:rgb(250,250,250);
padding:0;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
transform:translateY(-50%);
}
.card .left
{
width:70%;
height:100%;
background-color:rgb(250,250,250);
float:left;
padding:0;
margin:0;
}
.card .left .leftcontentbox
{
width:75%;
height:90%;
border:1px solid red;
margin:0 auto;
}
.card .left .leftcontentbox .topnav
{
width:100%;
border:1px solid black;
}
.topnav ul li
{
display:inline-block;
}
.card .right
{
width:29.55%;
height:100%;
background-color:#b6e6f2;
float:right;
padding:0;
margin:0;
}
<div class="container">
<div class="card fixit">
<div class="left">
<div class="leftcontentbox">
<div class="topnav">
<img src=""></src>
<ul>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="headertext">
</div>
<div class="latestarticles">
</div>
</div>
</div>
<div class="right">
</div>
</div>
</div>
Related
With my current code, how do I make the purple div stick to the left side of the green div? I tried float:left which didn't work. I got close when adding position:absolute; and left:50%; to my purple div class but when the screen resized the div fell off screen. Is there a quick way to float the purple div to the left of the green one so it's not in the center?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
Try like this.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display:flex;
}
#logo {
left:0px;
width: 100%;
margin:auto;
margin-left: 0;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="logo"></div>
</div>
</div>
There is a little white gap on the downside of mainBox, what is it and which cause it?
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid black;
box-sizing: border-box;
font-size: 30px;
}
#wrapper {
width: 900px;
margin: 0px auto;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#container {
width: 100%;
height: 100px;
background: black;
}
#mainBox {
width: 75%;
height: 150px;
background: blue;
float: left;
}
#sideBox {
width: 25%;
height: 100px;
background: yellow;
float: left;
}
#footer {
clear: both;
width: 100%;
height: 50px;
background: white;
}
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
Add border: none to #container
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
border: none; /**** Add this extra line ****/
width:100%;
height:100px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
You have a white gap here because your blue div (#mainBox) is 150px, which is taller than its container div (#container), set at 100px. This has caused the #mainBox div to extend outside the container with a slight offset at the leftmost side due to the black border applied to the div.
There are a number of ways to correct this gap, such as removing the border or the hardcoded height values.
It is because #sideBox have 100px height and #mainBox have 150px height. Make both same solve your issue.
Here i set #sideBox to height:150px;
And you have given parent container #container to height:100px and child to height:150px.
Edit:
I think i misunderstood your issue before. But as i say above. Your parent height is small then your child. Make it proper solve your issue.
body{
margin:0px;
padding:0px;}
div{
border:1px solid black;
box-sizing:border-box;
font-size:30px;}
#wrapper{
width:900px;
margin:0px auto;}
#header{
width:100%;
height:100px;
background:red;}
#container{
width:100%;
height:150px;
background:black;}
#mainBox{
width:75%;
height:150px;
background:blue;
float:left;
}
#sideBox{
width:25%;
height:100px;
background:yellow;
float:left;
}
#footer{
clear:both;
width:100%;
height:50px;
background:white;
}
<body>
<div id="wrapper">
<div id="header">this is the header
</div>
<div id="container">
<div id="mainBox">main box
</div>
<div id="sideBox">side box
</div>
</div>
<div id="footer">this is the footer
</div>
</div>
How can I align 4 divs, in css, inside a container like in this image: http://postimg.org/image/w0k7wgdfb/
Here's my html, I guess I need another container for DIV#2 and DIV#3.
<div id="container">
<div id="header"> DIV 1 </div>
<div id="wraper"> <!-- WRAPER -->
<div id="sidebar"> DIV 2 </div>
<div id="content"> DIV 3 </div>
</div> <!-- WRAPER -->
<div id="footer"> DIV4 </div>
</div>
Thank you for your help!
Solution 1 - Floats
After centre aligning the content, you could use a simple float trick for the two middle divs:
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
overflow:hidden;
}
#sidebar {
width:20%;
float:left;
height:100%;
background:red;
}
#content {
overflow:hidden;
background:blue;
height:100%;
}
#footer {
background:orange;
height:20%;
}
Solution 2 - Display:Table
After centre aligning the content, you could apply a table layout to the middle divs
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
display:table;
width:100%;
}
#sidebar {
width:20%;
display:table-cell;
background:red;
}
#content {
display:table-cell;
background:blue;
}
#footer {
background:orange;
height:20%;
}
Here there is a working fiddle.
HTML
CSS
#one{
width: 400px;
background: black;
margin: 0 auto;
height: 600px;
}
#two{
height: 100px;
width: 400px;
background: lime;
}
#three{
height: 400px;
width: 100px;
background: yellow;
float: left;
}
#four{
height: 400px;
width: 300px;
background: blue;
float: left;
}
#five{
height: 100px;
clear: both;
width: 400px;
background: silver;
}
I am not sure why contactBox is overlapping the mainInfo box.The contact box is also not stretching to its parent container which is 960px.
CSS
.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;
}
.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}
.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}
.contactBox {
height:450px;
background-color:green;
}
Here is a JS fiddle:
http://jsfiddle.net/2zm47/
I would probably code this css differently, but checkout the
.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;
}
.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}
.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}
.contactBox {
height:450px;
background-color:green;
}
I hope this helps. I put a note in the JS section of the fiddle.
http://jsfiddle.net/emersive/84WeT/1/
Your HTML is messed up. Should be like:
<div class="container">
<div class="mainInfo">
<div class="col-6">
<div class="imagePlaceholder"></div>
</div>
<div class="col-6">
<div class="about">
<p>...</p>
<p>...</p>
</div>
</div>
</div>
<div class="contactBox"></div>
</div>
I am trying to do a 3-column layout and was wondering why the blue (right) column wraps around. This works fine in IE but fails to work in Chrome (30.0.1599.101m)
http://jsfiddle.net/V85JF/
HTML
<body>
<div class="top">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:225px;
height:200px;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:75px;
height:200px;
background:green;
float:none;
display:inline-block;
}
.right
{
width:75px;
height:200px;
background:Blue;
float:right;
display:inline-block;
}
EDIT
I need the center element to have fluid height. Top should take whatever height center takes.
Use float:left for .center and .right as well.
For fluid height, keep min-height:200px of .center.
Try this:
.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}
Fiddle here.
jsFiddle demo
Html
<body>
<div class="top">
<div class="left">
</div><div class="center">
</div><div class="right">
</div>
</div>
</body>
CSS
body
{
height:100%;
margin:0;
padding:0;
background:gray;
}
.top
{
width:225px;
height:auto;
background:black;
}
.left
{
width:75px;
height:200px;
background:Red;
display:inline-block;
}
.center
{
width:75px;
height:570px;
background:green;
display:inline-block;
clear:both;
}
.right
{
width:75px;
height:200px;
background:Blue;
display:inline-block;
}
Try this
This Layout is Fluid
Fiddle DEMO
CSS
body
{
height:100%;
margin:0;
background:gray;
}
.top
{
width:100%;
height:200px;
background:black;
}
.left
{
width:20%;
height:200px;
background:Red;
float:left;
display:inline-block;
}
.center
{
width:60%;
height:200px;
background:green;
float:left;
display:inline-block;
}
.right
{
width:20%
height:200px;
background:Blue;
float:right;
display:inline-block;
}