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
}
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.
I have a problem with auto shrinking(in width) children in a flexible container box. When page shrinks, i want .c1 and .c2 shrink so their container .a2 shrinks and floats near .a1 not moves under it.
.con
{
background-color:red;
max-width:500px;
}
.a
{
background-color:yellow;
width:100px;
height:100px;
float:left;
display:inline-block;
}
.a2
{
background-color:grey;
overflow:auto;
max-width:400px;
width:100%;
}
.c
{
background-color:blue;
float:left;
height:60px;
width:50%;
overflow:auto;
}
.c2
{
background-color:black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
The following styles affect your .a2 element:
.a {
float: left;
display: inline-block; /* Useless! Floats are blocks */
}
.a2 {
width: 100%;
}
Just unset those and it will work:
.a2 {
display: block; /* Default value for <div> */
width: auto; /* Initial value */
float: none; /* Initial value */
}
.con {
background-color: red;
max-width: 500px;
}
.a {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
display: inline-block;
}
.a2 {
display: block;
width: auto;
float: none;
background-color: grey;
overflow: auto;
max-width: 400px;
}
.c {
background-color: blue;
float: left;
height: 60px;
width: 50%;
overflow: auto;
}
.c2 {
background-color: black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
</div>
<div style="clear:both"></div>
</div>
Alternatively, instead of unsetting, consider not setting them in the first place.
.con {
background-color: red;
max-width: 500px;
}
.a {
height: 100px;
}
.a1 {
background-color: yellow;
width: 100px;
float: left;
}
.a2 {
background-color: grey;
overflow: auto;
max-width: 400px;
}
.c {
background-color: blue;
float: left;
height: 60px;
width: 50%;
overflow: auto;
}
.c2 {
background-color: black;
}
<div class="con">
<div class="a a1">aaa</div>
<div class="a a2">
<div class="c c1"></div>
<div class="c c2"></div>
</div>
<div style="clear:both"></div>
</div>
I've recently gotten into the world of HTML/CSS and I am struggling with something.
I want to position the div's like this:
But the I only manage to it like this:
As you see, I want div 5 to be below Div 4, and next to div 3. But I only
Of course, I can wrap div 4 and div 5 in a new div, but I'd rather learn a better way of doing this.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
}
#innhold {
background-color: grey;
float: left;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
I don't think that there is a better way to do so without wrapping in a DIV your Div 4 and 5. But in place of using float, you can specify a width to each div and display them as display : inline-block; (a bit better).
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
}
#wrapping {
display: inline-block;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="wrapping">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Without wrapping, you can add a height (in PX, not in %) to your Div 3 so that Div 5 remain of the right. I don't really like this option...
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
height: 50px;
}
#innhold {
background-color: grey;
float: left;
width: 90%
}
#footer {
background-color: blue;
float: left;
width: 90%
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
The problem is that you need to specify a static height for your sub-menu...
Going by the diagram you supplied:
#side-meny {
float:left
}
Make a new div containing #innhold and #footer, let's call it #right-container so you have
<div id="right-container">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Then
#right-container {
float:right
}
See if that works.
Please use the following code which I have modified.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
width: 25%;
}
#block {
display: inline-block;
vertical-align: top;
width: 74%;
}
#block p {
margin: 0;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="block">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
in your css file you can set
#footer{
...
position:absolute;
left: (div3's width);
top: (div1+div2+div4 height)
}
i tried some codes but, no works anything.
would like make this with css, thanks =)
this code i tried, but doesn't work.
#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
i don{t know why this doesnt work.
A simple solution with no floats:
#main {
width: 200px; /* adjust as needed */
font-size: 0;
}
div div {
display: inline-block;
height: 60px; /* adjust as needed */
width: 100%;
box-shadow: inset 0 0 4px #000; /* cosmetics only */
background: #eee; /* cosmetics only */
}
div.h {
width: 50%;
}
<div id="main">
<div class="h"></div>
<div class="h"></div>
<div></div>
</div>
Note: using font-size: 0 for the container div to avoid the actual whitespace in the markup - can be avoided by removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
Add float:left; to #right, then it should work. Note that you could also use float:right; to #right, then #right would be on the right side. Using float: left; for both displays both divs next to each other without any gap.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try this script, I wrote it on JSfiddle:
http://jsfiddle.net/xb5vvpzn/1/
HTML
<div class="main">
<div class="top"> </div>
<div class="bottom1"> </div>
<div class="bottom2"> </div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
.main {
width:400px;
border:1px solid #000;
height:400px;
padding:10px;
}
.main div {
display:inline-block;
}
.top {
width:396px;
border: 1px solid #cc0000;
height:100px;
}
.bottom1, .bottom2 {
margin-top:10px;
border: 1px solid #cc0000;
width:195px;
height:100px;
}
Here's a jsFiddle that I've quickly created for you. The layout is same as what you had requested and it's responsive as well.
HTML:
<div id="container">
<div id="onetwo">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</div>
CSS:
#container {
width: 100%;
border: 3px solid blue;
padding: 1% 1%;
text-align: center;
}
#onetwo {
display: block;
width: 100%;
}
#one, #two {
width: 49%;
border: 3px solid red;
height: 50px;
display: inline-block;
}
#three {
width: 100%;
border: 3px solid red;
height: 50px;
}
#media (max-width: 820px) {
#one, #two {
width: 46%;
}
}
#media (max-width: 240px) {
#one, #two {
width: 40%;
}
}