I'm kinda stuck on the CSS for a home project I'm doing. Currently I'm working on a header, or 'top menu bar'. On each side of the viewport there are a button or two with a fixed px dimension. These L and R side div's are both set to float L and R, and are set as display:block;.
Now what I'm trying to get is that the 'header-center'-div will float on the same line in the center between these L and R div's. And all content within it should be centered as well. The last thing I'm trying to do is the max. width of the center div may (dynamically) not be more then what is left of the viewport width minus what is used for the L and R div (so everything stays on the same height).
How can I get the result I want for this??
<header>
<div id="header-left"></div>
<div id="header-center"></div>
<div id="header-right"></div>
</header>
#header-left {
width: 160px;
height: 80px;
display: block;
float: left;
}
#header-center {
height: 80px;
display: block;
overflow: hidden;
}
#header-right {
width: 240px;
height: 80px;
display: block;
float: right;
}
Maybe this can solve your problem
header{
display: table;
width: 100%;
}
#header-left {
width: 160px;
height: 80px;
display: table-cell;
background: #f00;
}
#header-center {
height: 80px;
overflow: hidden;
display: table-cell;
background: #0f0;
}
#header-right {
width: 240px;
height: 80px;
display: table-cell;
background: #00f;
}
<header>
<div id="header-left">Left</div>
<div id="header-center">Center</div>
<div id="header-right">Right</div>
</header>
Suggested Answer:
<!Doctype html>
<style>
body{
margin:0;
width:100%;
}
#header-left,
#header-center,
#header-right{
float:left;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#header-left,
#header-right{
width:10%;
background:rgb(255,0,0);
}
#header-center{
width:80%;
background:rgb(0,0,255);
}
</style>
<body>
<header>
<div id="header-left">Content</div>
<div id="header-center">Content</div>
<div id="header-right">Content</div>
</header>
</body>
</html>
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>
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 .
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.
An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/
CSS
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header_div {
display: inline-block;
width: 100%;
text-align: center;
}
.header {
display: inline-block;
height: 100px;
width: 100%;
max-width: 1000px;
background: #ddd;
}
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float: left;
width: 800px;
height: 100px;
background: #999;
}
</style>
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.
So as an example:
If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.
Is there anyway i can do this with CSS, or i need to use Javascript?
Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:
.menu {
height: 100px;
background: #999;
overflow: hidden;
}
#Andoni Roy Use this
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float:right;
overflow:hidden;
height: 100px;
background: #999;
}
You may not want to play with floating properties but specifying the parent width and display to table.
Like in the following example: http://jsfiddle.net/A8zLY/745/
You would end up having something like:
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
CSS
.header_div {
width: 1280px;
}
.header {
display: table;
}
.logo {
display: table-cell;
width: 280px;
}
.menu {
display: table-cell;
width: 1000px;
}
You could specify width in percentages.
I would like to place two divs next to each other. The right div's width is determined by it's content and should be aligned to the right of the container div. The left div's width should span the rest of the page.
I managed to do this with the following code (a minimized version of the original obviously):
<html>
<head>
<style>
#container {
border: 1px solid black;
display: table;
width: 1000px;
}
#left {
display: table-cell;
vertical-align: top;
width: 100%;
}
#right {
display: table-cell;
vertical-align: top;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
blabla
</div>
<div id="right">
<div id="image">
</div>
</div>
</div>
</body>
</html>
Works perfectly in both chrome and firefox, but in IE, the #right div is shown below the left one.
The idea is that only the #container and the #image have dimensions that are explicitly set. All other dimensions should be inferred from those by clever aligning somehow. The display: table-cell css property accomplishes this nicely, but nothing else seems to do...
Does anyone know a solution? There are a lot of "place div's next to each other" questions already, but all solutions seem to depend on all div's having fixed widths..
Change the CSS this way:
#left {
float: left;
width: 50%;
padding: 0;
margin: 0;
}
#right {
float: right;
width: 50%;
padding: 0;
margin: 0;
}
Let us know if you find some issues in this!
I think you set the
#left{width:600px;float:left};
#right{width:400px;float:left};
your problem solved.
look this one. it works.
<html>
<head>
<style>
#container {
border: 1px solid black;
display: table;
width: 1000px;
float:left;
}
#left {
display: table-cell;
vertical-align: top;
width: 57%;
float: left;
}
#right {
display: table-cell;
vertical-align: top;
float: right;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
blabla
</div>
<div id="right">
<div id="image">
</div>
</div>
</div>
</body>
</html>
I didn't have IE in my mac. As per i understand write like this:
#container {
border: 1px solid black;
display: table;
width: 1000px;
white-space:nowrap;
}
#left,#right {
display: table-cell;
vertical-align: top;
white-space:normal;
}
#image {
width: 400px;
height: 300px;
background-color: red;
}