I created a container. Plain text in the container displays inside the container, however, formatted text displays outside of the container. Please give suggestions. My html and css are posted below.
This is my html:
.left-column {
text-align: left;
float: left;
width: 40%;
padding-left: 5px;
}
.right-column {
text-align: left;
float: left;
width: 50%;
padding-left: 200px;
}
#container {
width: 900px;
background-color: #ffffff;
border: 1.5px solid #FFCC99;
margin: 0;
padding: 10px;
}
.border1 {
width: 910px;
border: 3px solid #376092;
margin: 1px;
padding: 2px;
}
border2 {
width: 915px;
border: 2px solid #FFCC99;
margin: 12px auto 12px auto;
}
<main id="gap">
<div class="border2">
<div class="border1">
<div id="container">
<div class="left-column">
</div>
<div class="right-column">
</div>
</div>
<!-- End Container -->
</div>
<!-- End Border1 -->
</div>
<!-- End Border2 -->
</main>
because you are floating the .left-column and .right-column, you should use a clearfix
Also I would advise you to use box-sizing:border-box, see more about border box model
Here is a snippet:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
}
.left-column {
text-align: left;
float: left;
width: 40%;
padding-left: 5px;
}
.right-column {
text-align: left;
float: left;
width: 50%;
/*padding-left: 200px; - this can be removed */
}
#container {
width: 900px;
background-color: #ffffff;
border: 1.5px solid #FFCC99;
margin: 0;
padding: 10px;
}
.border1 {
width: 910px;
border: 3px solid #376092;
margin: 1px;
padding: 2px;
}
.border2 {
width: 915px;
border: 2px solid #FFCC99;
margin: 12px auto 12px auto;
}
<main id="gap">
<div class="border2">
<div class="border1">
<div id="container" class="cf">
<div class="left-column">text left</div>
<div class="right-column">text right</div>
</div>
<!-- End Container -->
</div>
<!-- End Border1 -->
</div>
<!-- End Border2 -->
</main>
Set overflow:hidden in #container. This will force the container to respect the height of all elements within it, regardless of floating elements.
CSS
#container {
width:900px;
background-color: #ffffff;
border:1.5px solid #FFCC99;
margin: 0;
padding:10px;
overflow: hidden; /* Set this rule */
}
DEMO HERE
The problem is your padding on your #container.
Your css is :
padding: 10px and width: 910px
So, your padding add 20px (10px right, 10px left).
In the end, your #containter width is 920px and your parent div is 910px.
To fix your problem, you need to set the width of your parent to 920 or change the padding to : padding:5px;
Related
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
I have a container of certain height and width that holds a number of children (divs). I would like to have a 4px lightblue border around each div. Two neighboring divs should only have 4px space between them.
I'm able to accomplish this by manually setting the heights, widths, and margins/borders, but I'm sizing the children by percentage of the parent.
Here's a fiddle I have set up showing the divs in the parent, but without any spacing or border.
.container {
height: 300px;
width: 300px;
background-color: lightblue;
}
.left {
width: 30%;
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 50%;
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35%;
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border {
/* margin: 4px; */
}
<div class="container">
<div class="left border"></div>
<div class="top-right border"></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
http://jsfiddle.net/ymv0oave/
2px border for all divs, and 2px border for container.
.container {
...
border: 2px solid blue;
}
.container div{
box-sizing: border-box;
border: 2px solid blue;
}
https://jsfiddle.net/afelixj/mja5kfvw/
Putting the full answer here
.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;
}
.remove-right{
border-right: none;
}
Then put the class to your div class tag
<div class="container">
<div class="left border remove-right"></div>
<div class="top-right border remove-right "></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
You can use the calc() function is css to make use of % and still have an exact 4px border.
HTML:
<div class="container">
<div class="left border-right"></div>
<div class="top-right border-bottom"></div>
<div class="bottom-middle border-right"></div>
<div class="bottom-right"></div>
</div>
CSS:
.left {
width: 30% //Fallback for the 0.8% people still using IE7/IE8
width: calc(30%-4px); //HERE
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 70% //Fallback for the 0.8% people still using IE7/IE8
height: calc(50% -4px); //HERE
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35% //Fallback for the 0.8% people still using IE7/IE8
width: calc(35% -4px); //HERE
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border-right {
border-right: 4px solid lightblue;
}
.border-bottom {
border-bottom: 4px solid lightblue;
}
Goals:
"page-wrap" (blue background) must extend height of entire page.
Also keep footer at bottom of page.
Footer cannot overlap sidebar/content.
Problem:
Adding height:100% to #container causes footer to overlap when window resized, and adds blank space under footer caused by header
I've tried dozens of different configurations, but cannot seem to reach my goals.
http://jsfiddle.net/fZmut/3/
<div id="container">
<div id="header">header</div>
<div id="page-wrap">
<div id="inside">
<div id="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
<div id="flow-content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
css
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
/* height:100%; */ /* causes footer to overlap when window resized, and adds blank space under footer caused by header */
min-height: 100%;
position:relative;
margin: 0px auto 10px;
background-color: black;
}
#header{
background-color:green;
width:100%;
border-bottom: 2px solid black;
}
#page-wrap {
background: blue;
width: 450px;
margin: 0px auto 10px;
height:100%;
}
#page-wrap #inside {
margin: 0px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 20px;
}
#sidebar {
width: 50px;
float: left;
padding-left: 0px;
padding-top: 0px;
background-color: gray;
}
#flow-content {
background-color: yellow;
padding-left: 50px;
padding-top: 1px;
padding-right: 15px;
}
#footer {
background: #fff;
border: 1px solid black;
height: 20px;
width: 430px;
margin: 0 10px;
bottom: 0;
position: absolute;
}
You Can add 100% to #container and resolve the 2 issues you mentioned:
make the header absolute position to take care of the extra height issue. (but then you'll need to add extra padding to the blue area to accomodate.
also Make the footer display like a table row and its parent table to take care of the overlapping issue:
#header{
background-color:green;
width:100%;
border-bottom: 2px solid black;
**position:absolute;**
}
#page-wrap {
background: blue;
width: 450px;
margin: 0px auto 10px;
height:100%;
**display:table;
padding-top:20px;**
}
#footer {
background: #fff;
border: 1px solid black;
height: 20px;
width: 430px;
margin: 0 10px;
**display:table-row**
}
http://jsfiddle.net/fZmut/7/
I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.
So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:
1- Is that bad design and how should I do it?
2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.
This is my css.
body {
width: 960px;
font-size: 13px;
margin: auto;
margin-top: 20px;
border: 1px #000 solid;
}
.wrapper {
float: left;
width: 960px;
}
.header {
float: left;
width: 960px;
border: 1px #000 solid;
margin-bottom: 20px;
}
.menu {
width: 960px;
float: left;
border: 1px #000 solid;
}
.sidebar {
width: 260px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.content {
border: 1px #000 solid;
margin-left: 20px;
margin-top: 20px;
width: 620px;
float: left;
padding: 10px;
}
.footer {
border: 1px #000 solid;
width: 960px;
float: left;
margin-top: 20px;
}
And the layout file:
<body>
<div class="wrapper">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div class="sidebar">
sidebar
</div>
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
Anyways hope I am clear.
Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:
.wrapper {
overflow: auto;
margin: auto;
width: 960px;
}
Also, remove width: 960px and margin: auto from body as you don't need them anymore.
If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:
<div id="container">
<div id="left">Content! this should be floated left</div>
</div>
#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }
Should have the container display with the border around everything.
Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.