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%;
}
Related
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/
First sorry for bad English.
I create the following code:
HTML:
<!DOCTYPE html>
<html>
<head lang="fa" dir="rtl" style="font-family: tahoma">
<meta charset="UTF-8">
<title>test</title>
<link rel="Stylesheet" type="text/css" href="st.css">
</head>
<body>
<div id="container">
<div id="ontop"></div>
<div id="header"></div>
<div id="sideRight"></div>
<div id="center"></div>
<div id="sideLeft"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
#container{
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
}
#ontop{
width: 200px;
height: 200px;
background-color: purple;
position:absolute;
top:20px;
right:20px;
opacity:0.5;
}
#header{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideRight{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#center{
width: 58%;
height: 60%;
background-color: green;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideLeft{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#footer{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
I want to position div with "ontop" id in 20px from right and 20px from top of "container" div and be on top of other div.in my code position of "ontop" div ,related to screen not "container" div.
If you want it to be relative to the parent element, all you would have to do is add position: relative to the parent element. It is otherwise assumed to be absolutely positioned relative to the next relatively positioned parent element. Since there were none, it was relative to the window.
Example Here
#container {
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
position: relative; /* Added .. */
}
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 .
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%;
}
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}