I have a h1 and a p inside a div with display:flex.
The two are positioned side by side, but they have to be under each other.
It is about the elements with class jktitre and class jktxt inside (div)jkpage.
jkpage div is flex with jksidebar (side by side)
I did not expect that the text elements somehow inherit the flex property. Or something like that.
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
The CSS:
body{
background-color: lightgrey;
}
.jktitre{
margin-left:5%;
float:left;
display: block;
}
.jktxt{
margin-left:5%;
padding:10px;
float:left;
}
.jkrow{
width:100%;
display:flex;
}
.jkheader{
margin-top:20px;
height:150px;
width:100%;
background-color: #2d18a4;
}
.jknavbar{
height:45px;
width:100%;
background-color: black;
}
.jkpage{
height:400px;
width:75%;
background-color: #e7e7e7;
display:flex;
}
.jksidebar{
height:400px;
width:25%;
background-color: darkslategrey;
display:flex;
}
.jkfooter{
height:150px;
width:100%;
background-color: blue;
margin-bottom: 20px;
}
Add flex-direction: column to the parent element to display them under each other. The default value for it is row which shows the child elements from left to right(Side by side)
body {
background-color: lightgrey;
}
.jktitre {
margin-left: 5%;
float: left;
display: block;
}
.jktxt {
margin-left: 5%;
padding: 10px;
float: left;
}
.jkrow {
width: 100%;
display: flex;
}
.jkheader {
margin-top: 20px;
height: 150px;
width: 100%;
background-color: #2d18a4;
}
.jknavbar {
height: 45px;
width: 100%;
background-color: black;
}
.jkpage {
height: 400px;
width: 75%;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
}
.jksidebar {
height: 400px;
width: 25%;
background-color: darkslategrey;
display: flex;
}
.jkfooter {
height: 150px;
width: 100%;
background-color: blue;
margin-bottom: 20px;
}
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
Related
This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 7 years ago.
Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?
How it should look like:
Code:
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
display: block;
}
#one {
width: 40%;
float: left;
background: red;
}
#two {
background: yellow;
}
#three {
width: 40%;
float: inherit;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
Check this fiddle
#wrap::after {
display: block;
height: 0px;
clear: both;
float: none;
}
#wrap div {
float: left;
word-break: break-all;
}
#one {
width: 40%;
background-color: red;
}
#two {
width: 20%;
background-color: yellow;
}
#three {
width: 40%;
background-color: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
#two and #three(inherits from parent which is none) do not have float:left and you should give width to those element. For example, here I give width:32% to all div elements(#one, #two, #three).
.fl-l
{
float:left;
word-break: break-all;
width: 32%;
}
#wrap{
width:auto;
margin:0 auto;
border:0px solid;
height:200px;
display:block;
}
#one {
background:red;
}
#two {
background:yellow;
}
#three {
background:blue;
}
<div id="wrap">
<div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
To fix the width, set an absolute value to the wrap element.
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
word-break: break-all;
font-size: 0;
}
#wrap > div {
height: 100%;
display: inline-block;
overflow: auto;
font-size: 14px;
}
#one {
width: 40%;
background: red;
}
#two {
width: 20%;
background: yellow;
}
#three {
width: 40%;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>
I'm trying to put 3 divs(with different widths respectively : 10%,70% & 20%) in the same row but the middle one always go full width of the page.
Here is my code:
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
By default div is a block level element that's why they aren't in the same row.
You have a few options to fix this:
option with CSS flexbox:
.row {
display: flex;
width: 100%
}
.row>div {
/*demo purposes */
height: 30px;
}
#left-bar {
flex: 0 10%;
background-color: #F00;
}
#middle-bar {
flex: 1;
background-color: #60F;
}
#right-bar {
flex: 0 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
(old options)
option with display:inline-block
.row {
/*fix inline-block gap*/
font-size: 0;
}
.row>div {
display: inline-block;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
option with display:table-[cell]
.row {
display: table;
width: 100%
}
.row>div {
display: table-cell;
/*demo purposes */
height: 30px;
}
#left-bar {
width: 10%;
background-color: #F00;
}
#middle-bar {
width: 70%;
background-color: #60F;
}
#right-bar {
width: 20%;
background-color: #9F9;
}
<div class="row">
<div id="left-bar"></div>
<div id="middle-bar"></div>
<div id="right-bar"></div>
</div>
The table-cell option actually doesn't work in some internet explorer versions. But the same result can be achieved with the property float:
#left-bar{
width:10%;
background-color: #FF0000;
}
#middle-bar{
width:70%;
background-color: #6600FF;
}
#right-bar{
width:20%;
background-color: #99FF99;
}
.row > div {float:left;}
<div class="row">
<div id="left-bar">a</div>
<div id="middle-bar">b</div>
<div id="right-bar">c</div>
</div>
#left-bar{
width:10%;
background-color: #FF0000;
float:left;
}
#middle-bar{
width:70%;
background-color: #6600FF;
float:left;
}
#right-bar{
width:20%;
background-color: #99FF99;
float:left;
}
If that doesn't work, please provide more html and css because the problem will be somewhere else. Also, verify that you have heights set for your divs.
Help me please, I can't understand result of my simply code:
<div id="wrapper-top">
<div class="wrapper">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
and css file:
#wrapper-top
{
width: 100%;
background-color: gray;
}
.wrapper
{
margin: 0 150px 0 150px;
}
#logo
{
width: 100%;
height: 50px;
}
#menu
{
width: 100%;
height: 50px;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper.
I don't expected that because I want this blocks inside .wrapper.
http://jsfiddle.net/4yvLv853/1/
You need to contain the floated items in the #content div
One method (there are others as detailed here) is to use overflow:hidden
#content
{
width: 100%;
background-color: white;
overflow: hidden;
}
JSfiddle Demo
use clearfix
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#wrapper-top
{
width: 100%;
background-color: gray;
border: solid blue 1px;
}
.wrapper
{
margin: 0 150px 0 150px;
border: solid brown 1px;
}
#logo
{
width: 100%;
background-color: white;
}
#menu
{
width: 100%;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
<div id="wrapper-top">
<div class="wrapper clearfix">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">block-1-1</div>
<div class="block-3-1">block-3-1</div>
<div class="block-3-2">block-3-2</div>
<div class="block-3-3">block-3-3</div>
</div>
</div>
</div>
Try
<div id="wrapper-top">
<div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
I think the wrapper height is too small.
Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to
#content {
overflow-y: scroll;
overflow-x: hidden; //this gets rid of the pesky bottom scrollbar
}
How can I make this html structure
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
be displayed like this while div#1 and #2 have css float:left
( id names are integers only for demonstration purposes )
First of all, you will need to change the id's of your <div>'s to start with an alphabet rather than just one single digit since you won't be able to style your <div>'s using CSS then. Moreover, to achieve the sort of a layout which you're trying to create, you will need to wrap your two floated <div>'s inside a <div> and set the display property of that <div> to inline-block.
Here's a demo:
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
Edit: If you want to align the three boxes to the right side of the page then you will need to wrap your HTML inside another <div> and set the text-align property of that <div> to right, like this:
#wrapper {
text-align: right;
}
#one,
#two {
float: left;
}
#one {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#two {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#three {
display: block;
width: 200px;
height: 200px;
text-align: center;
color: white;
}
#one {
background: pink;
}
#two {
background: brown;
}
#three {
background: gray;
}
div#row-left {
display: inline-block;
width: 200px;
overflow: hidden;
vertical-align: top;
}
div#row-right {
display: inline-block;
width: 200px;
vertical-align: top;
}
<div id="wrapper">
<div id="row-left">
<div id="one">One</div>
<div id="two">Two</div>
</div>
<div id="row-right">
<div id="three">Three</div>
</div>
</div>
If you want to keep the given HTML structure, here's two different methods. One is working around the floats, the other is simply using absolute or relative positioning to force the third div into place.
HTML
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
CSS using inline-block (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
display: inline-block;
}
CSS using relative positioning (jsfiddle):
div {
width: 200px;
height: 200px;
margin: 10px;
}
#d1 {
float: left;
background-color: rgba(255,0,0,0.3);
}
#d2 {
float: left;
clear: left;
background-color: rgba(0,255,0,0.3);
}
#d3 {
background-color: rgba(0,0,255,0.3);
clear: both;
position: relative;
left: 220px;
top: -430px;
}
Fixed here - http://jsfiddle.net/3147og96/1/
html:
<div class="parent">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
css:
.parent {
height: auto;
width: 120px;
padding: 5px;
padding-left: 110px;
border: 1px solid red;
}
.parent div {
height: 50px;
width: 50px;
border: 1px solid red;
display: inline-block;
}
#one, #two {
float: left;
}
I have this layout:
<div id="container">
<div id="sidebar">
<div id="logo"></div>
<div id="box"></div>
</div>
<div id="content">
<div id="gallery">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
And here is the CSS:
#container {
background-color: black;
display:block;
position:absolute;
height:auto;
width:auto;
bottom:0;
top:0;
left:0;
right:0;
overflow:hidden;
background-size:auto 100%;
margin:50px;
}
#sidebar {
background-color: purple;
min-width: 250px;
width:250px;
max-width: 20%;
height:100%;
overflow:hidden;
float:left;
}
#logo {
height: 100px;
background-color: orange;
}
#box {
bottom: 20px;
font-family: sans-serif;
font-size: 10px;
color: grey;
margin: 20px;
padding: 10px;
background-color: white;
overflow-y: scroll;
text-align: justify;
}
#content {
display:inline;
width:75%;
margin-left: 300px;
padding: 0px;
margin:0px;
text-align: center;
background-color: green;
overflow-y: scroll;
}
#gallery {
margin-left: auto;
margin-right: auto;
display: table;
background-color: blue;
}
.thumb {
width: 200px;
height: 150px;
display: inline-block;
background-color: black;
margin: 20px;
border: 7px solid white;
overflow:hidden;
background-color: yellow;
}
I need the content of the #box and either #gallery or #content to be scrollable vertically.
Because my layout is responsible and the overflow of the #container is hidden I think there must be some problem with these features.
Here I created a jsFIddle to illustrate the problem.
You can add this in CSS #box
max-height : 100px ; /*for example*/
EDIT :
for you can use
overflow: auto;
in DIV you want to scroll