I have a quick rookie-like question. I used to know CSS, but didn't after having not used it in years.....
Anyway,
I'm trying to stack two divs on top of each other. A portion of my code is below.
CSS:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
float: top;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
float: bottom;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
float: left;
background-color:yellow;
}
HTML
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
I would like faq_left on the left.
I would like faq_box_top & faq_box_bottom to be in the center, where faq_box_top is above faq_box_bottom.
I would like faq_right on the right.
Attached is my page and style sheet along with an image of what I am trying to achieve.
Thanks in advance,
You should use position instead of float as the values you have given is wrong. My way is, to position them in top, left, bottom and right, with adjusting according to the left or top 50% by giving the offset in negative margins.
Have a look at the below snippet.
.faq_left,
.faq_box_top,
.faq_box_bottom,
.faq_right {
position: absolute;
}
.faq_left {
width: 134px;
height: 495px;
left: 0;
top: 50%;
margin-top: -247px;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
top: 0;
left: 50%;
margin-left: -139px;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
left: 50%;
margin-left: -139px;
bottom: 0;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
right: 0;
top: 50%;
margin-top: -247px;
background-color:yellow;
}
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
This is how it looks in 33% zoom:
View the snippet in Full Page.
float is only: left, right, or none. There isn't a: top or bottom.
Right and left boxes have display: inline-block so that they sit next to each other.
Top and bottom boxes have clear: both so that there is nothing sitting next to them.
Top and bottom boxes have margin: 0 auto so that they are centered.
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color: red;
display: inline-block;
}
.faq_box_top {
width: 279px;
height: 200px;
background-color: black;
clear: both;
margin: 0 auto;
}
.faq_box_bottom {
width: 279px;
height: 295px;
background-color: green;
clear: both;
margin: 0 auto;
}
.faq_right {
width: 783px;
height: 495px;
float: left;
background-color: yellow;
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>33180711</title>
</head>
<body>
<div class="faq_box_top"></div>
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_bottom"></div>
</body>
</html>
The dimensions of the boxes are odd... is this intentional? It's unclear what you wanted with the left and right boxes...did you want them touching or did you want a space between them? If you desire the latter then change the right box to float: right
I wouldn't use absolute positioning since it may easily break your layout. Instead I would wrap the top and bottom divs inside another div, like this:
<div class="faq_left"></div>
<div class="faq_middle">
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
</div>
<div class="faq_right"></div>
And then just change the CSS a little bit:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_middle {
width: 279px;
float: left;
}
.faq_box_top {
height: 200px;
background-color:black;
}
.faq_box_bottom {
height: 295px;
background-color:green;
}
.faq_right {
width:134px;
height: 495px;
float: left;
background-color:yellow;
}
You can see it running here: https://jsfiddle.net/u83dpf7t/
two changes:
.faq_right {
width:783px;
height: 495px;
float: right;
background-color:yellow;
}
That should be right instead of left, well?
and re-order:
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
fiddle here: http://jsfiddle.net/pt8dcc1t/1/
Related
The structure I need to recreate
I need to put the bottom right rectangle below the blue square just like on the left side and I have trouble with it. I have to use float and clear. Currently it is too low. Only the shape matters.
.blok1_1 {
background-color: cornflowerblue;
width: 450px;
height: 330px;
float: left;
}
.blok1_2 {
background-color: cornflowerblue;
width: 362px;
height: 330px;
float: right;
clear: right;
}
.blok1_3 {
background-color: yellow;
width: 1075px;
height: 855px;
float: right;
}
.blok1_4 {
background-color: mediumspringgreen;
width: 450px;
height: 520px;
float: left;
}
.blok1_5 {
background-color: mediumspringgreen;
width: 360px;
height: 525px;
float: right;
clear: both;
}
<nav class="blok1_1">
</nav>
<nav class="blok1_2">
</nav>
<section class="blok1_3">
</section>
<nav class="blok1_4">
</nav>
<nav class="blok1_5">
</nav>
easiest way is to use flex
#container{
display:flex;
margin:0 auto;
justify-content:center;
}
.end{
display:flex;
flex-direction:column;
}
.top{
width:150px;
height:200px;
background-color:lightblue;
}
.bot{
width:150px;
height:400px;
background-color:green;
}
#middle{
width:150px;
height:600px;
background-color:yellow;
}
<div id='container'>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
<div id='middle'>
</div>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
</div>
So I assume this is an exercise with pretty specific requirements. In that case I don't think DCR's answer will suffice, altough I have to say that it would probably be the real-world solution these days. Especially the part where floats are replaced with flex and the html structure is changed in some grid like construction of a left, middle and right section. I fully believe that's the way to go.
BUT since it's an exercise and using float and clear are your only options. Have a look at the code below!
Use a container for the 4 square elements. (the yellow part in the middle is just the background from the container)
The left elements float left and the right elements float right.
Since you want the bottom squares to be below the top squares instead of next to them you also add the clear left or right rule to these elements.
.container {
background-color: yellow;
width: 350px;
height: 300px;
}
.left-top {
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: left;
}
.right-top{
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: right;
}
.left-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: left;
clear: left;
}
.right-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: right;
clear: right;
}
<div class="container">
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
</div>
how can I make div left3 bottom and left4 bottom align to the bottom (like left2 bottom) and also stretch left2 top div over full width?
I tried vertical-align: bottom; but it does not help.
cheers,
Pete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21;
}
.header{
width: 100%;
background-color: #12bf81;
}
.left1{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #fc0234;
}
.left2{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #f78325;
}
.left2oben{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left2unten{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f11325;
}
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #00ccff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="left1">
left1
</div>
<div class="left2">
<div class="left2oben">
left2 top
</div>
<div class="left2unten">
left2 bottom
</div>
</div>
<div class="left3">
left3 bottom
</div>
<div class="left4">
left4 bottom
</div>
</div>
</body>
</html>
Have you tried using "bottom" in css?
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom:0;
}
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21
Position:relative;
}
When both .left3 and .left4 are set to float:left there will be an issue of the two overlapping. for that you can use different float settings, or use left or right in css just like we used bottom.
Explanation
In css, we set bottom to 0 for .left3 and .left4, this means the two divs, are 0 pixels from the bottom. The same can be used for top, right left.
Position must be set to absolute, in order for this feature to work.
Also, its a good idea to get into the habit of putting a semi-colon at the end of every statement in css, regardless if its the ending statement in the brackets.
UPDATE
Set the position for the wrap div to relative, then the position for the inner div to absolute. The positioning means the contents can overlap each other, so you must maintain fixed heights for your content
hope it can helped you :)
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
bottom: 0!important;
position: absolute;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom: 0;
left:38%;
}
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}