I can't get my content to go into a wrapper, it just shows on the left side
<div id="middle">
<div class="wrapper">
<div id="image_rose"><img src="assets/rose.jpg"/></div>
<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.</p>
<img src="assets/leef.png" />
<p>Text Input:</p>
CSS:
.wrapper{
background-color:#666666;
width:900px;
margin:0px auto;
text-align:left;
}
#middle{
background-color:#666;
width:900px;
float:left;}
You're putting your content and wrapper into #middle, which floats left. wrapper is the same size and middle, so will just site on the left.
You can clear your float as shown below:
clear:both
If the content is showing beyond the div, you might try adding an overflow: hidden; or a different overflow setting to that specific div in your css.
Try this layout for centering your middle content
HTML
<div id="wrapper">
<div id="middle">
</div>
</div>
CSS
#wrapper
{
width:100%;
padding:0px;
margin:0px;
}
#middle
{
margin:0 auto;
width: 600px;
}
Related
Hi all been searching hard but found various answers that doesn't seem to resolve my issue.
I have one div box that needs to be vertically align centered to the div box next to it matching its height which is not defined as the content will change
But i need the content in the left box to be centered no matter what the height of the div box next to it.
any help would be appreciated.
Thanks
<div class="container">
<div class="leftCol">
Content or image in here needs to be vertical center based on div next to it height <
/div>
<div class="rightCol">
Content here
</div>
</div>
Here is an example using CSS tables.
.table-panel {
display: table;
}
.table-panel div {
display: table-cell;
vertical-align: middle;
border: 1px dotted gray;
}
<div class="table-panel">
<div>Left panel</div>
<div>Right panel: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar risus. Vestibulum imperdiet velit nisi, eget ullamcorper urna rutrum vel. Aliquam tristique elit augue, nec lobortis eros pretium quis. Proin ac quam pretium,
fringilla est et, sodales erat. Cras quis odio est. Integer ornare, neque in efficitur ultricies, justo magna ornare enim, quis dictum enim ipsum vel urna. Cras consectetur orci id quam cursus feugiat. Proin laoreet ullamcorper est vitae sagittis.
Aliquam faucibus elit sed sodales varius. Phasellus maximus turpis non nisl lobortis, sit amet efficitur lacus suscipit. Nunc a ligula a est feugiat mollis in a lacus.</div>
</div>
If I understand your question right what you are looking for is a wrapper around the two left- and right-boxes. Then inside the wrapper you want the two boxes to be inline-blocks and with vertical-align:middle perhaps?
See this Fiddle:
<div id="wrap">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
#wrap{
width:250px;
height:auto;
background:#efefef;
}
.left-box{
display:inline-block;
width:100px;
height:150px;
background:#00ff00;
vertical-align:middle;
}
.right-box{
display:inline-block;
width:100px;
height:180px;
background:#ff0000;
vertical-align:middle;
}
http://jsfiddle.net/0kpdskf2/
Is this what you want?
I'm working on a webpage with a tabular layout, with three cells: top, bottom-left, bottom-right. The top cell contains a header element and has a height of 105px. The bottom-left cell is a navigation pane. The header and navigation pane are both fixed. The bottom-right cell is the content pane. The bottom two cells are wrapped in a div. I want the bottom wrapper to be essentially the height of the page minus the height of the header element (105px) so that the whole page is covered. I've looked around, but none of the solutions I've found have worked. This is my CSS (I'm using SASS):
div#lower-container {
position:absolute;
width:100%;
height:100%;
div#navigation {
width:20%;
background-color:transparent;
position:fixed;
top:105px;
height:100%;
border-right:1px solid $blue;
};
div#content {
position:absolute;
top:105px;
width:80%;
height:100%;
background-color:white;
margin-left:20%;
overflow-y:scroll;
};
};
And here is my HTML code:
<div id="lower-container">
<div id="navigation">
</div>
<div id="content">
<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>
And finally, a screenshot of what it looks like now: http://i.imgur.com/jsXa5.png
I would prefer to use pure CSS/SASS, and not JavaScript/jQuery. Thanks!
If I understood you right, you want something like this?
CSS:
#wrapper{
height:100%;
width:100%;
#top:{
position: absolute;
height: 135px;
}
#content{
position: relative;
height:100%;
}
}
HTML:
<div id="wrapper">
<div id="top">PICTURE</div>
<div id="content">Lorem Ipsum Dolor Sit Amet Bla Bla Bla</div>
</div>
CSS3 supports the calc operation, so you're probably looking for
height: calc(100% - 105px);
(The spacing around the - is important)
I have been able to sucessfully wrap text in a div with an image to the left but I can't wrap the text in a div with the image floated to the right. I have tried floating p left. I have also tried making changing the display mode of the div with right floated image to inline and inline block. I also tried using text-align left.
Here is the code for the div were the text wraps ok.
#text_area_top
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
}
Here is the code for the div where the text won't wrap.
#text_area_bottom
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
background-color:#00FF00;
text-align:left;
}
#text_area_bottom img { float:right; }
Here is some extra code that would be important to know for solving this problem.
p { display:inline-block; position:absolute; margin:0px; }
If there is any more information you need me to include please let me know and I will post promptly.
Here is the html:
<div class="content">
<div id="text_area_top">
<img src="img.png" id="content_img" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare
urna et ligula lobortis sed aliquam eros eleifend. Aliquam gravida tellus mollis
massa rhoncus egestas.
Aliquam molestie arcu vitae est accumsan rutrum. Cras vitae tellus justo. Quisque pulvinar adipiscing dolor, non consectetur enim vehicula quis.Etiam tortor augue, interdum et congue a, imperdiet sed risus. Cras sagittis vestibulum</p>
</div>
<div id="text_area_bottom">
<img src="img.png" id="content_img2" />
<p>Scelerisque vitae, convallis non nibh. Maecenas euismod lacinia ipsum, non vulputate metus eleifend id. Quisque sagittis posuere massa, sed pretium odio dignissim eu. In sit amet est non lectus semper pellentesque vitae in tellus. Nullam facilisis auctor quam at pretium.
</p>
</div>
</div>
Try that it work on my side.
p { width:500px; display:inline-block; position:relative; margin:0px; }
just add a width for your p tag.
i have this layout and i have these two divs, maincontent and extracontent. there supposed to float beside eachother. but when i have more than one extracontent div it slides down the main content for some reason. can you help me fix it?
i have provided a js fiddle, http://jsfiddle.net/XzRun/
HTML
<div id="container">
<div id="content">
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="maincontent">
<h1>Some header text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
</div>
</div>
</div>
CSS
#container {
width:1000px;
margin:0 auto;
padding:20px 0;
text-align:left;
}
#content {
margin-left:10px;
float:left; /* lines up the left #content and the right #sidebar div's beside eachother */
width:810px;
}
.maincontent {
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:506px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
.extracontent {
clear:left;
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:200px;
height:200px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
The problem is that divs are always floated horizontally, not vertically. What you want to do here is to float the .extracontents vertically, while keeping the horizontal relationship. To do this, wrap all the .extracontent divs in a '.allextras` div, with the following css:
.allextras { clear: left; float: left; width: 220px; }
Or however you want it styled to get the margins the way you want.
Im not particularly sure of what you want to achieve.
If you want to have two extra content panels beside each other, your either going to have to widen or shrink extra and main content.
To do this i recommend that you use some JQuery to determine the amount of .extracontent and then change the width according to that.
The best way would be to put .extracontent inside a container with static width and then do something like:
divide extracontent.width by (extracontent in parent).count.
You could also stretch #content to have a min-width instead of fixing the width to be 1000
As defined in your CSS, your #content has width 810px, your .maincontent has width 506px and your .extracontent has width 200px. If you add an extra .extracontent, you will have total 906px. So it goes beyond 810px and slides down.
Your #content that surrounds the one #maincontent and two #extracontents has a smaller width then all of them. 506 + 200 + 200 + all of the margins > 810px. Give it some more room and your divs won't drop to other levels.
Okay, my problem is that #main_content is the child of #content but it will not display in #content. I need for #content to vertically expand to #main_content's size. Also, #content is a part of #main_wrap, which should extend all the way to #footer. Any help would be greatly appreciated.
#main_wrap {
width: 850px;
margin-top:15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
width: 850px;
height: 288px;
}
#top_content {
width:850px;
height:250px;
}
#nav {
background-color:#333;
height:38px;
#content {
width:850px;
padding-top:15px;
padding-bottom:15px;
}
#main_content {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
float:left;
width:850px;
height:auto;
}
#footer {
float: left;
width:100%;
height:250px;
background-image:url(images/footer_bg_blue.png);
background-repeat:repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
#footer_cont {
padding-top:15px;
padding-bottom:15px;
}
<div id="main_wrap">
<div id="top">
<div id="top_content">
</div>
<div id="nav">
</div>
</div>
<div id="content">
<!--<div id="sidebar">
</div>-->
<div id="main_content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
</div>
</div>
<!--</div>-->
<div id="footer">
<div id="footer_cont">
test
</div>
</div>
You can specify overflow: hidden; for your #content div to expand its height all the way to the footer, as you can see at this jsFiddle, http://jsfiddle.net/68FFL/2/. I'm not really sure why that works. If you look at the WordPress.com Mystique theme demo, you'll see that they use that rule to expand their #main div, otherwise it has no height like yours did.
I'm not entirely sure, but I think one of the reasons why you're #content div had no height was because it had child elements that weren't in the document flow on the inside, because they were floated. If you put another element inside that isn't floated, then the height of the div will expand, as you can see here, http://jsfiddle.net/68FFL/3/