When there is no content in <div #id="profile-body"></div> the divs are parallel thanks to display: inline-block;, but when I fill this div with any kind of content, the height of the content acts as though it's changing the other divs margin-top that are parallel.
stylesheet.css
.profile-header{
margin: 0%;
padding: 0%;
font-size: 1em;
display: block;
}
.profile-body{
margin-left: 2%;
}
#profile-left{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
#profile-middle{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
#profile-middle-body div{
display: inline-block;
width: 30%;
}
#profile-middle-body p{
display: inline-block;
width: 65%;
}
#profile-right{
display: inline-block;
width: 30%;
height:100%;
min-height:300px;
}
index.html
<div id="profile-left">
<div class="profile-header">
<hr><p>Too Excessive</p><hr>
</div>
</div>
<div id="profile-middle">
<div class="profile-header">
<hr><p>Bio</p><hr>
</div>
<div id="profile-middle-body">
<!-- Comment to fix dix placement -->
<div>name</div><p>Brandon Nadeau</p>
<div>age</div><p>17</p>
<div>location</div><p>Alaska</p>
<div>member for</div><p>1 year</p>
<div>profile views</div><p>62</p>
</div>
</div>
<div id="profile-right">
<div class="profile-header">
<hr><p>About Me</p><hr>
</div>
</div>
Use float to those 3 divs. It should go up and remain there.
Fiddle
#profile-right{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
#profile-left{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
#profile-middle{
width: 30%;
height:100%;
min-height:300px;
float:left;
}
Since you're using inline-block with % widths for the layout - if you want to avoid floats, you could also try vertical-align:top; on all 3 divs.
Related
I have 2 divs within another container div. I want these 2 divs to be centered vertically in their parent container
<div class="wrapper">
<div class="div1"> some contents here</div>
<div class="div2"> some contents here</div>
</div>
Div1 and Div2 both have different dimensions and height specifically)
This is my css:
.wrapper{width:100%;
display:inline-block;
margin:0 auto;
}
.div1{max-width:760px;
display:inline-block;
margin:0 auto;}
.div2{max-width:540px;
height:auto;
display:inline-block;
margin:0 auto;
vertical-align:top
}
Contents of div1 and div2 are responsive elements(either images or a slideshow)
All I want is for Div 2 to be centered vertically in the main wrapper because it is a bit smaller than Div1.
Any leads where to start?
I am trying to avoid using top margins on div2 because it gets very messy on mobile.
I would recommend using flexbox. Here's a fiddle showing how it works
https://jsfiddle.net/m0nk3y/xchy52u7/
CSS:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 100%;
background: green;
}
.div1 {
max-width: 760px;
height: 100px;
background: gold;
}
.div2 {
max-width: 540px;
height: 50px;
vertical-align: top;
background: silver;
}
.wrapper {width:100%;
display:flex;
margin:0 auto;
align-items: center;
}
optionally, you may want to add flex-wrap:wrap; and justify-content: with a value of space-around or space-between
give the divs width:100%; and add clear: both; and make the container text-align: center; see code snippet
.wrapper{width:100%;
display:inline-block;
margin:0 auto;
text-align: center;
}
.div1 {
max-width: 760px;
width: 100%;
display: inline-block;
margin: 0 auto;
clear: both;
text-align: center;
}
.div2 {
max-width: 540px;
width: 100%;
height: auto;
display: inline-block;
margin: 0 auto;
vertical-align: top;
clear: both;
text-align: center;
}
<div class="wrapper">
<div class="div1"> some contents here</div>
<div class="div2"> some contents here</div>
</div>
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
Elements inside .wrapper are not centered aligned and after assigning width to .wrapper, it's showing a horizontal scrollbar.
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
width: 1024px;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
Any suggestions as to why this is happening?
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
max-width: 1024px;
width: 100%;
height: 192px;
font-size:a
}
you may not set a determined width
Were you looking for something like this:
https://jsfiddle.net/3ux7bdpf/
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
margin-right:10%;
height: 192px;
background: green;
display: inline-block;
}
#footer .wrapper .col:first-child {
margin-left:10%;
}
#footer .wrapper .col:last-child {
margin-right:0;
}
Its is simple. Why you are assigning fixed width to .wrapper
Just put width: 100%; or any width you want respective of footer in %.
Instead Assign Max-width to it. So if browser size is more than max-width than it will adjust accoring to your max-width.
#footer {
width:100%;
}
#footer .wrapper{
max-width: 1024px;
background:red;
margin:0 auto;
position:relative;
width: 100%;
height: 192px;
text-align: center;
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
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 div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle