I would like to add a space on the right of my page to place some extra content like tag cloud, ... like below (marked in red):
Here is my actual code:
<div id="menu">
#Html.BuildMenu()
</div>
<div id="content">
<div class="outer-gray">
<div class="inner-gray">
#RenderBody()
</div>
</div>
</div>
PS: my outer-gray and inner-gray are used to have a double-border effect.
I'd be so grateful if someone can point me in the right direction.
Thanks.
I figure the CSS property float is what you're looking for here. Try something like:
#menu { width: 10%; float: left; }
#content { width: 80%; float: left; }
#cloud-tag { width: 10%; float: right; }
I noticed you have:
<div id="This is my content"> when it should be
<div id="content">
if you reduce the width of your #content, it should fix it.
Related
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".
I have a couple of classes there so let me post them first.
HTML:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
</div><!-- content closed -->
CSS:
.content {
background-color: #eee;
height: auto;
}
.sidebar {
background-color: #555;
width: 250px;
height: auto;
padding: 10px;
float: right;
}
.area {
background-color: #777;
width: 590px;
height: auto;
padding: 10px;
}
So, you can basically see that every single class have height set on "auto". Thats good cause I want content to follow sidebar and area. And they will have plenty of content inside of them.
Now...
.sidebar is set on float:right; so it doesnt really affect to move the content that stands below. Which is footer in my case.
I am wondering how to make the object thats floating, to move the parts that are below of it, depending on auto set height.
I'm not sure I understand your question, but if you are trying to position footer underneath your content that is floated right, you need to clear the float:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
<div style="clear:both"></div>
This is the footer
</div><!-- content closed -->
Jsfiddle: http://jsfiddle.net/xmw7M/1/
I didn't find something good that helps me so I'm asking a question, sorry if there is any answer lying around somewhere already
I want an html page wiht a header, left div for a menu, and in the middle (where you usually have 1 content div) - 4 divs for 4 graphs, and I want them to be aligned:
menu div | 1 2
| 3 4
I couldn't do that with float left, because number 3 doesn't stick to the menu, but to the left of the page...
any thoughts? (besides making everything super fixed, which is a solution I don't like)
HTML
<div id="menu">Menu</div>
<div id="content">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
</div>
CSS
#menu {
float: left;
width: 20%;
}
#content {
float: right;
width: 80%;
}
#d1, #d2, #d3, #d4 {
width: 50%;
}
#d1, #d3 {
float: left;
}
#d2, #d4 {
float: right;
}
See this fiddle.
Note You might want to give the 4 divs equal height depending on your content.
#d1, #d2, #d3, #d4 {
width: 50%;
height: ...
}
A variation on melhosseiny's answer.
The blocks will automatically compensate for different heights
fiddle
Markup
<div id="menu">Menu</div>
<div id="content">
<div class="content-block">
first block<br />
second line<br />
third line<br />
</div>
<div class="content-block">
second block
</div>
<div class="content-block">
third block
</div>
<div class="content-block">
fourth block
</div>
</div>
CSS
#menu {
float: left;
width: 200px;
background: #ccc;
}
#content {
margin-left: 200px;
/* for the benefit of ie6 double margin bug */
zoom: 1;
}
.content-block {
background: #efefef;
float: left;
width: 50%
}
/* every second block clears starting at block 3 */
.content-block:nth-child(2n+3) {
clear: left;
}
The details of your question are a bit vague, but perhaps a margin-left on item 3 equal to the width of your menu div would allow your float-strategy to work.
If you post your actual code, your question will afford more helpful responses.
If You don't want anything to be fixed, than probably this is the way to go :
<div> <!-- upper content -->
<div style="float:left">1</div>
<div style="float:left">2</div>
</div>
<div> <!-- lower content -->
<div style="float:left">3</div>
<div style="float:left">4</div>
</div>
I am working on a site laid out with divs. I am having trouble with one in particular: the training photo div.
If you go to http://php.wmsgroup.com/eofd6.org/education.html you'll see a photo underneath the left nav that has dropped down. I want it to snap right under that nav box. I have tried several different things with its positioning as well as the main content divs positioning and I can't get it right.
Any help would be appreciated. The link to the style sheet is http://php.wmsgroup.com/eofd6.org/in.css
Thanks!
Float #content right, not left.
In order to get more predictable results, I would create an over-all wrapper, then 2 column wrappers. You're close to this layout now, so it would be a simple fix.
<html>
<head>
<style type="text/css">
#leftColumn {
width: 30%;
margin: 0px;
float: left;
display: inline;
clear: left;
}
#rightColumn{
width: 60%; /* allow 10% for flex/margins */
margin: 0px auto;
float: left;
display: inline;
clear: right;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div id="header"></div>
<div id="leftColumn">
<div id="nav"> </div>
<div id="training_photo"> </div>
</div>
<div id="rightColumn">
<div id="content"> </content>
</div>
</div>
<div id="footer"> </footer>
</body>
Can't you change the markup to include the #training_photo div in the #nav div?