Layout.cshtml
<section id="main">
<div id="sidebar">
#{Html.RenderAction("CategoryMenu", "Store");}
</div>
<div id="content">
#RenderBody()
</div>
</section>
style.css
...
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
overflow: hidden;
}
#sidebar {
display: block !important;
width: 15%;
float: left;
font: bold 20px arial, verdana;
background: green;
height: inherit !important;
}
#content {
display: block !important;
float:none;
}
...
I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?
Sidebar is floating left, so it will be taken out of the DOM flow and set up to the left. If you don't want #content to appear next to it then you need to add clear: both to #content style. That will force it to clear any floats around it and appear on the next line. However, it will not stop #sidebar from floating and there will be nothing next to the sidebar.
Can you clarify what you are trying to do since you are specifically setting #sidebar to float:left but then asking how to make them not float.
Related
My sidepanel doesn't float right properly. It acts (for some reason) as if there's a top margin, it refuses to align next to the page title.
I'm also attempting to make it responsive using <aside>
It should be here:
My main content sits in a max-width:1050px, the rowSidepanel should make a column of width:60%, I assumed the sidebar would too make a column of width:27%; float:right; all within that pageArea.
I've inspected element and tried to force top:0; etc but it is still not behaving itself.
Does anyone know what I am doing wrong? .
HTML
<div id="pageArea">
<div class="colPad">
<div class="rowSidepanel">
<!-- InstanceBeginEditable name="main content" -->
<div class="breadCrumb"> Home <span style="font: Georgia;"> > </span> Repertoire</div>
<h1>Repertoire</h1>
<p class="introPara">Intro</p>
<p>Main content....</p>
<!-- InstanceEndEditable -->
</div>
<aside id="sidebar">
<div class="sidepanelArea"> Sidepanel </div>
</aside>
</div>
</div>
<div class="clearBoth"></div>
CSS
#pageArea {
max-width: 1050px;
margin: 0px auto 0px auto;
padding: 134px 0px 0px 0px;
display: block;
background-image:url("/images/common/centered-page-bg.jpg");
background-repeat: no-repeat;
background-position: 0% 12%;
min-height: 667px;
z-index: 1;
overflow: hidden;
position: relative;
}
.colPad {
padding: 0px 15px 0px 15px;
}
.rowSidepanel {
width: 60%;
}
aside {
float: right;
padding: 1%;
width: 27%;
margin: 0% 0px 20px 0px;
background-color:#000;
color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
#media all and (max-width : 799px) {
#sidebar {
width: 99%;
padding: 1% 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-top: 3px solid #dc1b20;
background-color: #FFF;
color: black;
}
}
Your .rowSidepanel is displayed block and no matter of his width he is assigned to be across all screen. Just make him float: left;
.rowSidepanel {
width: 60%;
float: left;
}
Your #breadcrumb, repertoire header, and paragraph element are all block elements and are thus taking up the entire width of the browser (and pushing down your sidebar).
You should group those other elements into a container div of their own and flow that left. Apply background colors to both divs (the one floated left and the one floated right) to visualize what you're doing.
Try changing the div order, #rowSidepanel before #sidebar.
http://codebins.com/bin/4ldqosu
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I am having trouble centering a div within its parent. I'd also like to make the child div auto fit its text content with a background colour applied. The child in question is #JoinSft-msg-block
here's my html:
<div id="JoinSubfooter">
<div id="JoinSubfooter-wrapper">
<div id="subft-line"></div>
<div id="JoinSft-msg-block">some text here</div>
</div>
Here's my CSS
#JoinSubfooter {
width: 100%;
height: 200px;
background: transparent url(../images/grey_body_noise.png);
clear: both;
/*Clears all columns and sets the footer at the bottom*/
}
#JoinSubfooter-wrapper {
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
#JoinSft-msg-block {
display:inline-block;
padding: 10px 10px 10px 10px;
background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
margin: 0px auto;
}
Fiddle
If you are using an inline-block element, you can just apply text-align center to its parent;
i.e.
#JoinSubfooter-wrapper {
text-align:center;
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
You could try this instead of display:inline-block; but not sure if it works in all browsers
display: table;
I am having trouble aligning some DIV's on a comment system. Below is my current CSS code and the html along with a photo to show the problem.
In the photo the delete part on the right side of the first comment is positioned at the bottom of the comment and I need this div to be at the top. Also if you look in the second comment you will see the delete text isn't even on the right side, it is under the first div
Can someone help me to position it correctly?
alt text http://img2.pict.com/91/04/e8/1487396/0/800/screenshot2b17.png
<style type="text/css">
ol.commentlist {
margin-right:auto;
margin-left:auto;
padding: 0;
list-style-type: none;
width: 950px;
}
ol.commentlist li {
float: left;
margin: 0;
padding: 10px 0px 10px 0px;
width: 950px;
}
div.commenttext p{margin:0;}
/* Makes even number comments have a different background color */
ol.commentlist li.thread-even {
background:#f6f6f6;
border-top:1px solid #e3e3e3;
border-bottom:1px solid #e3e3e3;
}
/* Left column with teh comment posters info and photo */
ol.commentlist li div.photocolumn {
display: block;
float: left;
width: 120px;
padding: 0px 0px 0px 15px;
}
/* Center column with the comment data */
ol.commentlist li div.commentcolumn {
position: relative;
float: right;
margin: 0 0 15px 0;
padding: 0 80px 0 30px;
min-height: 53px;
width: 700px;
border-left: 1px solid #dfe5e7;
overflow: hidden;
}
/* Right side cloumn with moderation links */
ol.commentlist li div.modcolumn {
display: block;
float: right;
width: 50px;
padding: 0px 0px 0px 0px;
}
</style>
<ol class="commentlist">
<li>
<!-- left column of the comment for user photo -->
<div class="photocolumn">
A photo goes here
</div><!-- END left column -->
<!-- CENTER column of the comment -->
<div class="commentcolumn">
<p>02/12/3009</p>
<p>Being new to web design, I use to have those same bad habits of starting things directly into photoshop!</p>
</div> <!-- END right comment column -->
<!-- Far right moderation column -->
<div class="modcolumn">
Delete
</div> <!-- END moderation -->
</li>
</ol>
Add vertical-align: top; to each of your divs.
Change those float: rights to float: left
Add text-align: right to get the contents of a div to align right.
Also, there's a new StackOverflow-affiliated website for HTML/CSS/Web Design at http://doctype.com/
I am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.
To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)
The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image.
(see above url but "withoutfloat.png")
How can I get the shadow div to wrap the image and keep it centered within the li?
Css:
<style type="text/css">
ul
{
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
}
li.box
{
display: inline;
float: left;
margin: 3px;
background: red;
position: relative;
}
.wraptocenter
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
}
.wraptocenter *
{
vertical-align: middle;
}
.shadow
{
background: blue;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadow img
{
margin: -4px 6px 6px -4px;
}
</style>
Html:
<ul>
<li class="box">
<div class="wraptocenter">
<span>
<div class="shadow">
<img src="Handler.ashx?id=936&size=103" />
</div>
</span>
</div>
</li>
</ul>
Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.