That is pretty much the effect I am trying to achieve
<div id="wrap">
<div id="three"></div>
<div id="one"></div>
<div id="two"></div>
</div>
#one{
width:80%;
height: 30px;
background-color:red;
float: right;
}
#two{
width:80%;
height: 30px;
background-color:black;
float: right;
}
#three{
float: left;
width: 20%;
height: 100%;
background-color: blue;
}
#wrap{
width: 900px;
height: 60px;
}
http://jsfiddle.net/m5u4u89f/
But is there any way to do this without wrapper div with set height for all of them? because the thrid div is supposed to have the same height as all the other divs combined.
An alternative to using table like #Khanh_TO did, you could use flex.
.thing{
flex:1;
background-color:red;
}
.thing:hover{
background-color:darkred;
}
#three{
float: left;
background-color: blue;
}
#wrap{
display:flex;
flex:1;
height:100px;
}
#wrapper{
display:flex;
flex-direction:column;
flex:1;
}
<div id="wrap">
<div id="three"><p style="transform: rotate(270deg);">text</p></div>
<div id="wrapper">
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
</div>
</div>
Related
I am new to programming, I want to arrange div elements as following:
header div 1
--------------------
left 2 | center 3| right 4 |
---------------------
footer div 5
I tried position and display attributes but failed to get desired result.
How can I arrange in this way and how to arrange any div element in simple way?
Try this code for your div structure.
.wrapper {
color: #fff;
float: left;
text-align: center;
width: 100%;
}
.header {
background-color: red;
float: left;
width: 100%;
}
.left {
background-color: orange;
float: left;
width: 25%;
}
.center {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: orange;
float: left;
width: 25%;
}
.footer {
background-color: blue;
float: left;
width: 100%;
}
.header, .footer {
margin: 1% 0;
}
<div class="wrapper">
<div class="header">
<h1>Header Div</h1>
</div>
<div class="left">
<h1>Left Div</h1>
</div>
<div class="center">
<h1>Center Div</h1>
</div>
<div class="right">
<h1>Right Div</h1>
</div>
<div class="footer">
<h1>Footer Div</h1>
</div>
</div>
Try this code
HTML
<div class="header">Header Div</div>
<div class="left-section"></div>
<div class="center-section"></div>
<div class="right-section"></div>
<div class="footer-section">Footer</div>
CSS
.header{
width:100%;
height:50px;
background:green;
}
.left-section{
height:500px;
width:29%;
display:inline-block;
background:yellow;
padding:0px;
margin:0px;
}
.right-section{
height:500px;
width:29%;
display:inline-block;
background:gold;
padding:0px;
margin:0px;
}
.center-section{
height:500px;
width:40%;
display:block;
display:inline-block;
background:gray;
padding:0px;
margin:0px;
}
.footer-section{
width:100%;
height:50px;
background:orange;
}
Codepen link
http://codepen.io/santoshkhalse/pen/gwWbAV
I have a section element with 3 divs inside, I want to center horizontally 'div 2', but the problem is the adyacent divs are not the same size so "justify-content:center" doesn't works.
I know here (under the title "Center a flex item when adjacent items vary in size") is a solution, but it doesn't work for me.
Here is the revelant code:
HTML
<section>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</section>
CSS
section{
display:flex;
position:relative;
}
#div1{
width:260px;
}
#div2{
position:absolute;
left:50%;
transform(translateX:-50%,0);
}
#div3{
margin-left:auto;
width:50px;
}
Here is also a codepen.
My goal is center 'div2' and move the rest of divs to the left and right edges respectively.
Any help would be appreciated.
<section>
<div id="div1">DIV 1</div>
<div id="div2_wrap">
<div id="div2">DIV 2</div>
</div>
<div id="div3">DIV 3</div>
</section>
section{
display: flex;
position:relative;
padding:5px;
height: 500px;
background:yellow;
}
div{
padding:5px;
background:coral;
}
#div1{
width:260px;
}
#div2_wrap{
position: absolute;
left:50%;
height: 100%;
align-items: center;
display: flex;
}
#div2 {
background-color: #000fff;
}
#div3{
margin-left:auto;
width:50px;
}
You can wrap your divs around another parent div and set them to have equal widths first. Then align your children divs inside it's parent. Like this:
HTML:
<section>
<div class="wrapper" id="div1">
<div class="innerDiv">DIV 1</div>
</div>
<div class="wrapper" id="div2">
<div class="innerDiv">DIV 2</div>
</div>
<div class="wrapper" id="div3">
<div class="innerDiv">DIV 3</div>
</div>
</section>
CSS:
section{
display:flex;
padding:5px;
background:yellow;
text-align:center;
}
.wrapper{
display:flex;
flex-grow:1;
flex-wrap:wrap;
}
.innerDiv{
padding:5px;
background:coral;
}
#div1{
justify-content:flex-start;
}
#div1 .innerDiv{
flex:1;
}
#div2{
justify-content:center;
}
#div3{
justify-content:flex-end;
}
#div3 .innerDiv{
width:50px;
}
Codepen here
Or you can go with the old school more browser compatible way, and also keeping your HTML code same.
section {
padding: 5px;
background: yellow;
text-align: center;
position: relative;
float: left;
box-sizing: border-box;
width: 100%;
}
div {
padding: 5px;
display: inline-block;
background: coral;
}
#div1 {
width: 260px;
float: left;
}
#div2 {
left: 50%;
margin-left: -0.5em;
position: absolute;
}
#div3 {
float: right;
width: 50px;
}
Codepen Here
https://jsfiddle.net/zfacazy0/
.row {
width:200px;
background:blue;
display:block;
overflow:hidden;
}
.col{
width:30%;
margin-right:5px;
background:red;
float:left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
if I put 33% and the margin is too much it will not have single row. Either I adjust margin or width, I just can't do a proper 3 column with equal margin and width. Need help.
Check this. You can use the first-child attribute to remove margin from first element.
.row {
width: 200px;
background: blue;
display: block;
overflow: hidden;
}
.col {
width: 30%;
margin-left: 5%;
background: red;
float: left;
}
.col:first-child {
margin-left: 0px;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
Just display:flex can do the trick:
.row {
width:200px;
background:blue;
display:flex;
overflow:hidden;
}
.col{
width:33%;
margin-right:5px;
background:red;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
.row {
width: 200px;
background: blue;
display: flex;
overflow: hidden;
}
.col {
width: 33.33%;
margin-right: 5px;
background: red;
float: left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>
I'm creating a website that has the following setup:
<html>
<body>
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
</body>
</head>
The css is as following:
.wrapper{
margin: 0 auto;
max-width: 1500px;
}
.wrapper_devider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
The .wrapper has a fixed width of 1500px and the rest is done with %.
The thing I can't seem to fix is that I want the slider to be full width.
I have tried to set the width if the .slider to 1500px but it only expands to the right.
Can anybody see what I do wrong?
M.
The wrapper has a max-width of 1500, this is different then a fixed width, this would look like
width: 1500px;
Even if you set the width to 1500, it still won't work because your slider element is inside your divider.
I would recommend the following layout:
HTML
<body>
<div class="wrapper">
<div class="wrapper_divider">
<div id="header">header</div>
</div>
<div class="slider">slider</div>
<div class="wrapper_divider">
<div class="container">container</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</div>
</body>
CSS
.wrapper{
margin: 0 auto;
width: 1500px;
}
.wrapper_divider{
width:60%;
padding:0 20%;
}
#header{
float: left;
width: 100%;
}
.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;
}
#container{
float: left;
width: 100%;
}
.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer{
display:block;
float: left;
width: 100%;
}
I've made an example of how it would look: http://jsfiddle.net/zon1d0gz/
OPTIONS
Move Slider outside of .wrapepr.
Make .wrapper 100% width and add new internal div of 60%.
If you cannot move the slider then make it position:absolute and offset the .wrapper with padding.
.wrapper {
position:relative;
margin: 0 auto;
max-width: 1500px;
padding-top:150px;
}
.wrapper_devider {
width: 60%;
padding: 0 20%;
}
#header {
float: left;
width: 100%;
}
.slider {
position:absolute;
left:0;
top:0;
display: block;
float: left;
width: 1500px;
background-color: #0000FF;
height: 150px;
}
#container {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}
#footer {
display: block;
float: left;
width: 100%;
}
<div class="wrapper">
<div class="wrapper_devider">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</div>
Your .wrapper class has max-width:1500px. This is an upper limit, I think you want: width:1500px.
.wrapper{
width: 1500px;
display: inline-block;
height: 100%;
}
Also wrapper_devider is set to 60%, so the slider won't span the entire 1500px since the slider is nested within wrapper_devider. I would remove that div entirely, you don't need it.
<body>
<div class="wrapper">
<div id="header"></div>
<div class="slider"></div>
<div id="container"></div>
<div class="sidebar"></div>
<div id="footer"></div>
</div>
</body>
Here's the solution with jsfiddle
I have a layout where I have 3 columns.
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
How can I place these 3 blocks in one line without JS, calc and flexbox if I need:
logo should be fixed
user-name should have auto width
search-input should places on the left free space between logo and user-name blocks. It has to be fluid container.
Use flexbox:
#wrapper {
display: flex;
/* flex-direction: row; <-- by default */
}
#logo {
flex: 0 0 200px;
background-color: lightgreen;
}
#user-name {
flex: none;
background-color: lightblue;
}
#search-input {
flex: 1 0 auto;
background-color: lightgrey;
}
<div id="wrapper">
<div id="logo">logo</div>
<div id="search-input">input</div>
<div id="user-name">user name</div>
</div>
May be this is what you want. you can add content of user-name to see how it work.
.wraper{
width: 100%;
border: 1px solid red;
}
#logo{
float:left;
width:250px;
height: 50px;
border:1px solid #CCC;
display:block;
background-color:yellow;
}
#search-input{
margin-left:260px;
min-height:50px;
display:block;
background-color:red;
}
#user-name{
float:right;
display:block;
height:50px;
background-color:#FFF;
}
#search-input > .inner{
height:50px;
background-color:red;
margin-right:20px;
}
#user-name > .inner{
background-color:green;
min-width:150px;
height:50px;
margin-left:10px;
}
<div id="wrapper">
<div id="logo">Logo</div>
<div id="user-name">
<div class="inner">
user name
</div>
</div>
<div id="search-input">
<div class="inner">
search input
</div>
</div>
</div>
<div id="wrapper">
<div id="logo"></div>
<div id="search-input"></div>
<div id="user-name"></div>
</div>
<style>
#logo{float:left;padding:2px}
#search-input{width:50%;float:left;padding:2px}
#user-name{width:auto;float:left;padding:2px}
</style>
#wrapper{
display:block;
}
#logo{
display:inline-block;
width:30%;
float:left;
}
#search-input{
width:50%;
display:inline-block;
float:left;
}
#user-name{
width:auto;
display:inline-block;
float:left;
}
This will keep them in one line.