I use a User Control to display a bunch of fields in an ASP.NET MVC application.
eg.
<div class="metadata-left metadata">
<div>
Default Domain:</div>
<br />
<div>
Disabled:</div>
<br/>
</div>
<div class="metadata-right metadata">
<div>
<%= Html.EditorFor(c => c.IsDefault) %></div>
<br />
<div>
<%= Html.EditorFor(c => c.IsDisabled) %></div>
<br />
</div>
In the stylesheet, I have the following classes:
.metadata-left
{
float: left;
width: auto;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
.metadata div
{
height: 20px;
}
How do I get these fields to display side by side? Right now I get them all under one column one after another.
You might have more success organising your elements like this
<div class="metadata-field">
<div class="metadata-left metadata">
Default Domain:
</div>
<div class="metadata-right metadata">
<%= Html.EditorFor(c => c.IsDefault) %>
</div>
</div>
<div class="metadata-field">
<div class="metadata-left metadata">
Disabled:
</div>
<div class="metadata-right metadata">
<%= Html.EditorFor(c => c.IsDisabled) %>
</div>
</div>
With CSS:
.metadata-field {
clear:both;
}
.metadata-left
{
float: left;
width: auto;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
.metadata div
{
height: 20px;
}
You can make your adjustments to further change the layout.
See: http://jsfiddle.net/LbTg9/
It is most likely the width of .metadata-left. Add an explicit width to that like:
.metadata-left
{
float: left;
width: 29%;
text-align: right;
}
.metadata-right
{
float: left;
width: 68%;
padding-left: 3%;
text-align: left;
}
Related
I have 2 elements:
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
and i wanted to make a align left and b to align right. Normally im used to leveraging float, but i wanted it to fit within the confines of the parent object for cleanliness.
Im trying to get A and B be clean and line up horizonally while 1 is on 1 size of the div.
I was trying various attempts of display:inline-block and then doing a flight right etc but that isnt getting the desired effect.
EDIT It seems that generally speaking, float right and left were working. The issue is that the bottom alignment is off which was annoying me.
If i am incorporating a float right and float left, it works based on the element, but if there a way to line it up so that both A and B are resting on the bottom of the parent?
have you considered flex ?
#parent {
display:flex;
justify-content:space-between;
}
div {
margin:auto 0 0;/* they line up from bottom in this margin case */
border:solid;
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
or
#parent {
display:flex;
justify-content:space-between;
}
div {
border:solid;
/* no rules about behaviior makes each boxes of a row same height */
}
<div id="parent">
<div id="a">a</div>
<div id="b">b<br/>line</div>
</div>
now question doesn't say about size (width/height) of boxes :)
Here's another option (based off your new criteria)
HTML
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
CSS
#a, #b {
width: 50%;
display: table-cell;
vertical-align: bottom;
}
#parent {
width: 100%;
display: table;
}
FIDDLE
Try this:
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="clear: both;"></div>
</div>
Need something in the middle of it?
<div id="parent">
<div id="a" style="float: left;">Hello</div>
<div id="b" style="float: right;">World!</div>
<div style="text-align: center;">holy schmoley</div>
<div style="clear: both;"></div>
</div>
All together now.
<style type="text/css">
#a {
float: left;
}
#b {
float: right;
}
#c {
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Of equal heights:
<style type="text/css">
#a, #b, #c {
height: 100%;
}
#a {
background-color: #ff0000;
float: left;
}
#b {
background-color: #00ff00;
float: right;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley</div>
<div class="clear"></div>
</div>
Aligned to the bottom using absolute, I recommend adding a margin to the #c div to prevent any odd overlapping:
<style type="text/css">
#parent {
position: relative;
}
#a, #b {
position: absolute;
bottom: 0;
}
#a {
background-color: #ff0000;
}
#b {
background-color: #00ff00;
right: 0;
}
#c {
background-color: #0000ff;
text-align: center;
}
.clear {
clear: both;
}
</style>
<div id="parent">
<div id="a">Hello</div>
<div id="b">World!</div>
<div id="c">holy schmoley<br /><br /><br /></div>
<div class="clear"></div>
</div>
Float with Flex
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
© Copyright
Float with flex, bottom positioning:
<style type="text/css">
#container {
/* width: 600px; */
}
#parent {
position: relative;
}
#a {
bottom: 0;
display: flex;
float: left;
justify-content: space-between;
position: absolute;
width: 100%;
}
#b {
background-color: #ff00ff;
float: left;
width: 100px;
}
#c {
background-color: #00ff00;
float: right;
width: 100px;
}
#d {
padding: 0 100px 0 100px;
width: inherit;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
<br /><br /><br /><br /><br /><br />Heres my content!!<br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
© Copyright
Using the flex float bottom as your full page layout:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
}
#parent {
position: relative;
height: 100%;
}
#a {
display: flex;
float: left;
justify-content: space-between;
width: 100%;
position: absolute;
bottom: 0;
}
#b {
background-color: #ff00ff;
width: 100px;
float: left;
}
#c {
background-color: #00ff00;
width: 100px;
float: right;
}
#d {
bottom: 0;
left: 100px;
right: 100px;
position: absolute;
}
#e {
background-color: #ff0000;
}
</style>
<div id="container">
<div id="parent">
<div id="a">
<div id="b">Hello</div>
<div id="c">
World!
<br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="d">
<div id="e">
Heres my content!!<br /><br /><br />
</div>
</div>
</div>
</div>
div#a{text-align:left;}
div#b{text-align:right;}
Or vice-versa will do the trick.
If you want to avoid float then you can use display: table; to achieve the desired effect. But this will need an additional wrapper.
CSS
#wrap {
display: table;
width: 100%;
}
#parent {
display: table-row;
width: 100%;
}
#a {
display: table-cell;
width: 50%;
background: green;
}
#b {
display: table-cell;
width: 50%;
background: red;
}
HTML
<div id="wrap">
<div id="parent">
<div id="a">AAAA</div>
<div id="b">BBBBB<p>
asdfafasfasdf
</p></div>
</div>
</div>
See my jsfiddle .
give 50% width to each div a and b and then make a float:left and b float:right .
and give equal height to both divs a and b .
try it
<div id="parent">
<div id="a">div a</div>
<div id="b">div b</div>
</div>
#a {
background:red;
float:right;
width:50%;
height:200px;
}
#b {
width:50%;
background:green;
float:left;
height:200px;}
I am struggling trying to get the text to sit next to the image, its just not happening, please can some one explain what im doing wrong here? much appreciated!
.alignright {
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Try using tags instead of div with display:initial in all 3 tags (img, h1, h2) and in h1 and h2 span tag set the float property to right or left.
Just corrected what was needed :
(click on full page in code snippet or else you will not see the difference with your own result)
.wrap {
width: 40%;
margin-left: 2%;
}
.alignright {
display: inline;
}
.source {
float: left;
overflow: hidden;
width: 20%;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin: 25px;
display: inline;
}
<div class="wrap">
<div class="source">
<img src="../image/recomendbutton.jpg">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
.alignright {
margin-top:-40px;
width: 77%;
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150"><span>
</div>
<h1 class="alignright">Recommendations?</h1></span>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">
I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
Everything worked just fine, until...
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
Please see my JSFiddle: http://jsfiddle.net/bkG5A/
Any help would be greatly appreciated!
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
Another option is to set your child div to display: inline-block;
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="child">
a
<br />a
<br />a
</div>
<div class="child">
a
<br />a
<br />a
<br />a
<br />a
<br />a
<br />a
</div>
<div class="child">
<div class="content">
a
<br />a
<br />a
</div>
</div>
</div>
JSFiddle Demo
You have to set the height for the parents (container and child) explicitly, here is another work-around (if you don't want to set that height explicitly):
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
position:relative;
}
.content {
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: blue;
}
Fiddle
You can use this CSS:
.content {
height: 100%;
display: inline-table;
background-color: blue;
}
JSFiddle
The child can only take a height if the parent has one already set. See this exaple : Vertical Scrolling 100% height
html, body {
height: 100%;
margin: 0;
}
.header{
height: 10%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 80%;
}
.footer {
height: 10%;
background-color: #faf2cc;
}
$(function() {
$('a[href*="#nav-"]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
html,
body {
height: 100%;
margin: 0;
}
.header {
height: 100%;
background-color: #a8d6fe;
}
.middle {
background-color: #eba5a3;
min-height: 100%;
}
.footer {
height: 100%;
background-color: #faf2cc;
}
nav {
position: fixed;
top: 10px;
left: 0px;
}
nav li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li>
got to a
</li>
<li>
got to b
</li>
<li>
got to c
</li>
</ul>
</nav>
<div class="header" id="nav-a">
</div>
<div class="middle" id="nav-b">
</div>
<div class="footer" id="nav-c">
</div>
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.