I been trying every way possible to try and float the sidebar to the left and have it fit beside the content div, but it seems IMPOSSIBLE for me. Please help.
HTML:
<div class="index-page">
<img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
<h1> Welcome to Elektrik Host! </h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.</p>
<h1> A little about us </h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.</p>
</div><!-- //index-page -->
<div class="sidebar">
<img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
</div><!-- //.sidebar -->
CSS:
.index-page { color: #000; width: 462px; }
.sidebar { float: right; width: 200px; }
clearfix :
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
I always find it easier to put the float-ing content ahead of the content that makes way for it, so I switched your sidebar to come ahead of the index-page div, and used the following CSS:
.sidebar {
width: 200px;
float: left;
}
Demo over at JS Bin.
.sidebar { float: left; width: 200px; } not right
To make them beside:
- index-page also need floatleft too index-page{ float: left;} (FF need, IE not)
- move sidebar to before of index-page
You can follow this tutorial: http://css.maxdesign.com.au/floatutorial/index.htm
CSS CODE
.floatright { float: right; }
HTML CODE
<p>
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
<p>
you dont need to do just apply the class straight to the image.
PK
Related
I'm trying to basically blocks that are adjacent to each other and have a defined width. However, I want the height of the cells to line up with other cells in the row.
Please see the following codepen for the code to play around with:
http://codepen.io/thinkbonobo/pen/EKdxgP
.cm-table-frame {}
.table-frame-row {}
.table-frame-cell {
border: 1px solid lightskyblue;
/* display: table-cell; */
display: inline-block;
vertical-align: top;
width: 100px;
}
I've tried two methods:
display:table-cell - I like this method as it sets the height properly but I can't seem to figure out how to set the width.
display: inline-block - This method lets me easily set the width but I can't set the height to dynamically match the blocks in the line/row. some cells may have 1 line some cells may have 5 lines but they all should be the same height for a given row.
Your advice would be much appreciated!
if you want to use display: table-cell, the set the max-width and min-width:
.table-frame-cell {
border: 1px solid lightskyblue;
display: table-cell;
vertical-align: top;
min-width: 100px;
max-width: 100px;
}
or
if you want to use display: inline-block, you need to set the height of the elements:
.table-frame-cell {
border: 1px solid lightskyblue;
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
}
It's generally adviseable not to use tables for layouts, and display:table-cell will validate fine, but in the end has the same issues (as also discussed in the provided link).
If using CSS Level 3 is not an issue, you can use flexboxes for this (Flexbox Browser Compatibility), like this:
.flex-container {
background-color: green;
display: flex;
}
.flex-container > div {
background-color: orange;
flex: 1;
padding: 15px 20px;
margin-right: 20px;
max-width: 120px;
}
<div class="flex-container">
<div>Very short text.</div>
<div>This is a lot of text, even though it's probably very little compared to what you're trying to do, as stack's preview window is comfortably narrow.</div>
<div>Another bit of text for flavor.</div>
</div>
The only solution that comes to mind that works in browsers without CSS3 implementation is to use Javascript or jQuery to set all boxes to the same height.
Option #1
(For old browsers support)
use display:table/table-cell along with width, something like this:
body {
margin: 0
}
.table {
width: 100%;
display: table;
}
.cell {
width: 25%;
display: table-cell;
}
.cell:nth-child(odd) {
background: red
}
.cell:nth-child(even) {
background: green
}
<div class="table">
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>
Option #2
(If you don't mind NOT supporting old browsers)
you can use CSS3 flexbox
body {
margin: 0
}
.table {
width: 100%;
display: flex;
}
.cell {
width: 25%;
flex:1
}
.cell:nth-child(odd) {
background: red
}
.cell:nth-child(even) {
background: green
}
<div class="table">
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I'm trying to build a web template in which the main content resides in a div called #content. #content is 90% the width of its parent container, #wrapper, and has a max-width of 1200px. But I also want to have the occasional section that spans the entire width of the browser window. (I can't just apply the 90% width rule to each regular section, because sometimes there will be a sidebar that exists outside of #content, and the sidebar and #content need to have the 90% width applied to them as a whole.)
How do I do this? I played around with negative margins, but I couldn't figure it out.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #DDD;
}
#content {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
}
.full-width {
background-color: #333;
color: #EEE;
padding: 1em;
margin: 0 -10%; /* obviously this doesn't work */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
When you are wrapping content within an element constrained by margin limits, then you must compensate for this space "taken" from children of it.
If your parent div is 90% width of the body, it means all 100% children will take full width of that 90% not 100%, so how to fix this?
Those children must be 110% width and take negative margin.
Something like:
.content {
width: 90%;
margin: 0 auto;
}
.offmargins {
width: 110%;
margin-left: -6%;
background: #ccc;
padding: 1%;
}
Here is an example:
jQuery(document).ready(function(){
jQuery(window).on('resize', adapt);
adapt();
});
function adapt() {
jQuery('.full-width').css({
width: jQuery(window).width(),
marginLeft: '-6.2%'
});
}
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Another approach without JS:
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Is there some reason why you can't have two different sized sections? It seems to me that you just need to have two containers - one that is restricted to 90%/1200px and one that isnt:
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
See: http://jsfiddle.net/t9wuapb9/
or the following snippet:
html, body {
background-color: #DDD;
margin:0;
}
#wrapper, #content {
width: 100%;
}
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
</div>
</div>
I'm taking an old WordPress site I designed years ago and now I'm making it responsive. Problem is I have a main content area on the site and a sidebar div and the issue is the sidebar div is not expanding down the entire height of the #contentWrap div on this site. I've already tried adding 100% heights to the #page, #contentWrap and #sidebar, all to no avail. On the old site design, I did a trick using background images, but that realistically won't work with a responsive desig.Any idea how I can make this work?
Site in question: http://destinationbeershow.com/episode-guide/
Code:
<div id="contentWrap">
<div id="content" class="narrowcolumn">
</div>
<div id="sidebar">
</div>
</div>
CSS:
#contentWrap {
width: 856px;
height: 100%;
}
#page {
background-color: #ac4f23;
text-align: left;
margin: 0px auto;
width: 856px;
height: 100%;
}
.narrowcolumn {
background-color: #ac4f23;
float: left;
padding: 0;
margin: 0;
width: 640px;
color: #FFF;
}
#sidebar {
padding: 16px 8px 10px 8px;
float: right;
width: 160px;
height: 100%;
font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
border-left: 10px solid #fff;
background-color: #ebd299;
}
You can make everything collapse below your 856px hard width and use percentages inside that, or you can fiddle with the math. You also don't mention how you are doing your media queries, I'm assuming mobile first, which means that IE8 won't see the columns unless you learn more about that or use desktop first responsive design, however to make the columns the same height no matter what is inside either, here's one way (display:table/display:table-cell) which stacks below the 856px width you have on your #page. Use percentages.
DEMO: http://jsbin.com/biyito/1/
CSS:
.narrowcolumn {
background-color: #ac4f23;
color: #fff;
box-sizing: border-box;
padding: 10px 20px;
}
#sidebar {
padding: 10px 20px;
border-top: 10px solid #fff;
background-color: #ebd299;
box-sizing: border-box;
}
#media (min-width:856px) {
#contentWrap {
width: 100%;
display: table;
}
.narrowcolumn {
width: 80%;
display: table-cell;
}
#sidebar {
display: table-cell;
padding: 10px;
width: 20%;
border-left: 10px solid #fff;
border-top: 0px;
}
}
HTML
<div id="contentWrap">
<div id="content" class="narrowcolumn">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
<div id="sidebar">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
the #contentWrap has no height... i tried I really tried to make it responsive with your content but it just doesn't work. For now if you define the height of it, the bar will be end to end.
In that page the height would be 1361px
If you can place the content in http://jsfiddle.net/ is much more easy to find and get to the problem.
I have a fixed div with 100% height, and within that, a child-div that's relatively positioned. The child-div holds text that can be changed, so it doesn't have a fixed height.
I want the child-div to scroll vertically if its content overflows out of the screen. I played around with the min and max height properties to achieve this, but it isn't an ideal solution, and doesn't always work.
EDIT: min and max height seemed to be ignored, almost. I calculated how much vertical area the textBox would take up for the minimum 'allowable' screen height, and set that as the height. Adding min and max height made no difference to this. The only problem with this solution is that the box is always around ~60%, so even when it doesn't need to scroll, it does. This works, but isn't ideal. If there's a way to get around this it would be great.
This is what I have so far:
<div class="content">
<div id="textbox"> some text
</div>
</div>
.content { position: fixed; height: 100%; top: 0px; right: 0px; }
#textBox {
position: relative;
top: 165px;
height: 61.5%;
overflow-y: auto;
}
Is there a better, more fool-proof way for doing this?
The following worked perfectly for me:
<style type="text/css">
#fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid black;
overflow: hidden;
background: white;
}
#scrolling {
overflow: auto;
max-height: 98%;
}
</style>
<div id="fixed">
<div contenteditable id="scrolling">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non
enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas
augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
The div's content is editable, so just add text until it scrolls. It would work on decent browser.
Live Example
Basically You have to set the overflow of your fixed element as you can see in this example, and there's a jsfiddle to play with the possibilities.
I have found a solution by testing and it seems to work. It requires 3 DIVs. First and uppermost div will be your fixed element. It will contain another div as its child, which will be positioned relatively. It will another div and this div will contain your content, it has to be positioned absolutely
Code: https://codepen.io/ltorvalds024/pen/GxKdeO
I have a text block in a div that is floated to the right. The div should align to the top but it has bumped down about 100px. See the text box next to the red flower here: http://174.121.46.122/~flowerwo/inside.html
I tried absolution positioning but when I do the background image disappears. It should be obvious where the text needs to be but it won't align properly.
Here is the html:
<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3>Headline</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" />
</div>
</div>
</div><!-- end small box -->
Here is the CSS:
#small-box {
width: 625px;
position: relative;
margin: 10px 0 0 5px;
background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }
img.small-box-photo { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box
Any help getting this to align properly to the top will be appreciated.
{ width: 300px; float: right; margin: 0 30px 0 0; }
#small-box-bot => display: table;
img.small-box-photo => float: left;
It does work as expected for me. Take a look at this example. Doesn't it look like what you try to achieve? If no, give more information and, preferably, the link to online version where we can see the issue.
UPDATE AFTER THE ONLINE EXAMPLE.
So, in the example you gave, there is the problem with clearing happening when:
the #r-box-lower clears the right floating with clear: right
the #r-box-lower sits at the same DOM level as #small-box, containing the weirdly shifted block of text
because of the p.1 and p.2 the #text-box is being cleared by #r-box-lower that makes it start right where #r-box-lower starts.
So, to fix the issue, you need to wrap #right-box and r-box-lower into a shared div like:
<div id="right-column" style="float: right; width: 192px">
<div id="right-box">
…
</div>
<div id="r-box-lower">
…
</div>
</div>
Surely, you want to move those inline styles into your stylesheet.