I solved a problem I was having and I thought the solution might help others.
I needed to have a 3 column layout with fixed left and right columns and a flexible center. It needed to fill the space between the columns, no matter how it changed, so it couldn't be fixed. It's strange and doesn't seem like it'll work, but it's like magic.
I modified what was put together here http://jsfiddle.net/qx32C/36/
Here's a demo on my 3-column version http://jsfiddle.net/chazthetic/qx32C/294/
HTML
<div class="container">
<div class="right">lkasjdfl;<br />kjasdf;<br />lkjas;<br />ldfkjdjf</div>
<div class="lineContainer">
<div class="left">lkasjdfl;<br />kjasdf;<br />ldfkja;<br />sldfjk;laksdjf</div>
<div class="middle">lkasjdfl;<br />kjasdf;<br />lkjas;</div>
</div>
CSS
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: auto;
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.middle {
margin-left: 100px;
background: #ccc
}
.right {
width: 100px;
float: right;
border: 1px solid #000
}
You should just float the middle left as well. This will allow the elements to all be dependent on the size of the browser.
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.middle {
float:left;
background: #ccc
}
.right {
width: 100px;
float: right;
border: 1px solid #000
}
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
http://s4.postimg.org/mbrpxn2d9/Untitled.png
Edit: Not a duplicate. The other question doesn't contain information about divs being automatically adjusted to the words on the inside.
I have 4 divs. I have 3 divs inside another div, and I'm trying to float one to the left, one to the center, and one to the right. I'm also trying to make the width and height of the divs on the inside to be automatically adjusted to the width and height of the words on the inside of the divs. I also want the divs on the inside to stack up on top of each other, instead of being on the same line. So far, I got the left div to float to the left, and the right div to float to the right, but I just cannot get the middle div to be centered, nor get it to adjust to the width and height of the word inside of it. Please take a look at my code:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
float: left;
}
#innerMiddle {
border: 1px solid red;
margin: auto;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
Depending on the output of the image, I think flexbox solution would be a good way to go.
Let the container have a flexible layout with column wrapping.
Align each item based on position in the container i.e. flex-start, center and flex-end
#outer {
display: flex;
display: -ms-flex;
flex-flow: column wrap; /* Wrap the items column wise */
justify-content: flex-start; /* Items to start from the top of the container */
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
align-self: flex-start; /* Equivalent to float: left of your code */
border: 1px solid red;
}
#innerMiddle {
align-self: center; /* Equivalent to margin: auto */
border: 1px solid red;
}
#innerRight {
align-self: flex-end; /* Equivalent to float: right */
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'>Middle</div>
<div id='innerRight'>Right</div>
</div>
If changing your HTML just a bit is an option, you can add span elements in your divs which will give you want, and it will work in all browsers:
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
text-align:left;
}
#innerMiddle {
text-align:center;
}
#innerRight {
text-align:right;
}
div > div > span {
border: 1px solid red;
}
<div id='outer'>
<div id='innerLeft'><span>Left</span></div>
<div id='innerMiddle'><span>Middle</span></div>
<div id='innerRight'><span>Right</span></div>
</div>
This is what you mean?? I had Edited
#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#innerLeft {
border: 1px solid red;
/* width: 30%; */
float: left;
}
#innerMiddle {
border: 1px solid red;
float: left;
margin: 0 5px;
}
#innerRight {
border: 1px solid red;
float: right;
}
<div id='outer'>
<div id='innerLeft'>LeftLeftLeftLeft</div> <br>
<div id='innerMiddle'>MiddleMiddleMiddleMiddle</div> <br>
<div id='innerRight'>RightRightRightRight</div>
</div>
write your html tags like this hope it help!
<div id='outer'>
<div id='innerRight'>Right</div>
<div id='innerLeft'>Left</div>
<div id='innerMiddle'></div>
</div>
I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.