I am trying to go from a 2-col layout on Desktop like so:
To a 1-col layout on Mobile like so:
I am having trouble getting container #5 to the correct position on Desktop. My markup (modified for brievity) is like so (this can be changed to whatever):
<div id="container-1></div>
<div id="container-2></div>
<div id="container-3></div>
<div id="container-4></div>
<div id="container-5></div>
On desktop: #1 and #5 are floated left, the rest are floated right. But this causes #5 to be position right next to #4 (#5 top-aligned with #4) instead of right below #1. I thought it should've worked. Am I missing something here?
PS: All the containers' height are fluid
Try wrapping the middle 3 in an extra container and wrapping that.
<div id="container">
<div id="container-1">content content content content content content </div>
<div id="containerwrapper">
<div id="container-2">content content content content content content </div>
<div id="container-3">content content content content content content content content content content content content </div>
<div id="container-4">content content content content content content content content content content content content </div>
</div>
<div id="container-5">content content content content content content </div>
</div>
and the CSS:
#container { background: none; float: left; width: 340px; }
div { margin: 10px; margin-bottom: 0; background: #0f0; }
#container-1 { float: left; width: 60px; }
#containerwrapper { background: none; float: right; margin: 0; }
#container-2 { width: 240px; }
#container-3 { width: 240px; }
#container-4 { width: 240px; }
#container-5 { float: left; width: 60px; }
You can see it here: http://jsfiddle.net/GcYuh/
Related
Here is my template i would like to fill the footer like on this website kars4kids.com (scroll down to the footer)
.footer {
padding: 180px 0;
background-color: #222222;
width:100%;
The <footer> tag is inside the .container. Kindly get it out of the wrapper, or change it to fluid container.
<footer>
<div class="container"> <!-- This is the reason -->
<div class="row">
<div class="col-md-3 col-sm-6">
Or change it to container-fluid.
You'll need to make the outer element (footer) to take up the full width and have another element inside to hold your content and format it correctly in the middle.
<footer>
<div class="container">
<!-- content -->
</div>
</footer>
footer {
background: #E5F4FE;
padding: 0;
margin: 0;
display: block;
}
footer .container{
width: 70%;
max-width: 1050px;
margin-right: auto;
margin-left: auto;
}
I've created an example here http://codepen.io/AVDW/pen/xVgLyO
In this site I have a wordpress theme with this HTML structure:
<header>
<nav> ... </nav>
</header>
<div class="post-content"> ... </div>
header {
float:left;
with:30%;
}
.post-content {
float:right;
with:30%;
}
And I want to add widgets to the left column.
My options are:
1)make header widgetable: widget will appears before content and this is bad for seo.
2)put the header and the sidebar in a wrapper: the same, widgets before content
My question is: is an html bad practices to put header inside other div? And put the header after content in the html? What is the best structure for doing it?
I think the pest solution for you is to place the header with position: absolute. For that you will need to have fixed height of header element.
<div class="wrapper">
<header>
</header>
<div class="sidebar">
</div>
<div class="post-content">
</div>
</div>
CSS:
header{
position: absolute;
width: 300px; /* give your desired width */
height: 200px; /*give your desired height */
top: 0;
left: 0;
}
.sidebar{
width:30%;
float: left;
padding-top: 200px /* this is the header height */
}
.post-content{
width:70%;
float: right;
}
Of course, in HTML you can put post-content before sidebar and it will also work.
Im working on a site right now, and I have run into the problem with my text. When I zoom out, the text begins to stack and actually goes out of my div. I have the div at a fixed width and height, and have it wrapped out in other divs, and cant figure this out for the life of me. Only the text moves though, everything else stays put. It looks kinda likes this
Desired:
this is my text
in the way that
I want it to be
actual:
this
is
the
text
As I zoom out the text tends to stack up and push out of the div.
.content {
width: 960px;
margin: 0 auto;
}
.contentleft{
float: left;
width: 480px;
}
.contentright{
float: right;
width: 480px;
}
.boxone {
float: left;
clear:both;
height: 211px;
width: 230px;
background-image:url(../images/rec1.png);
}
.textone {
width: 220px;
height: 200px;
overflow:hidden;
clear: both;
}
HTML
<div class=content>
<div class=contentleft>
<div class=boxone>
<div class=textone>
<p> TEXT TEXT TEXT TEXT </p>
</div>
<div class=learnone>
</div>
</div>
<div class=boxtwo>
</div>
</div>
<div class=contentright>
<div class=boxthree>
</div>
<div class=boxfour>
</div>
</div>
</div>
what can I do to stop that text from moving?
It's a browser behaviour to zoom all the items in the page, but as a developer you can specify a font-size in pixel.
font-size:12px;
Try simple just increasing the width of the div.
Example
.contentleft {
width: 800px;
}
Im trying to create a new master page without using a table and its causing me a headache.
Its very nearly there, I just need to make the 'Messages' and 'Content' divs full width so the 'Menu' div, plus the 'Messages' and 'Content' div are the same width (100% of the screen) as the 'Top' div.
I have set up a jsFiddle, can anyone give me some pointers?
http://i.stack.imgur.com/d1HO5.png
http://jsfiddle.net/CJRv5/
Im happy to change HTML a bit but the following must be considered:
menu is 130px wide, the rest of the content must fill remaining window width - no 960 grid!
Simplest (unintuitive) way, just change
#divMasterSubContainer
{
float: left;
...
to
#divMasterSubContainer
{
overflow:hidden;
...
http://jsfiddle.net/CJRv5/2/
Ref http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
^ you need to make sure that the width of menu + width of messages/content is not more than the width of the container in which they reside. Do something like this
div { border: 0; margin: 0; padding: 0;{
#content {
width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }
<div id="content">
<div id="menu" class="float-left">
<p>menu</p>
</div>
<div id="main" class="float-left">
<div id="message"><p>messages</p></div>
<div id="content"><p>content</p></div>
</div>
<div class="clear-both"></div>
</div>
I'm looking for some help with my CSS layout. I can't seem to get it how i want. Here is an image of what i am looking for.
Required Layout Image
I can't get div2 to fill its' section with the overflow being visible to the bottom of the left column.
Here is my code that i am using to show where i am at. Please some help would be great! I'm looking to target IE6+
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.leftContent {
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 250px;
height: 100%;
color: #333;
border: red ridge;
background: blue;
overflow: hidden;
}
.centreContent {
margin-left: 254px;
margin-right: 1px;
margin-bottom: 20px;
color: #333;
background: green;
border: red ridge;
padding: 0 0px;
height: 100%;
}
.rightContent {
position: absolute;
right: 20;
top: 0;
padding: 0;
width: 100px;
color: #333;
background: black;
border: red ridge;
}
.div1 {
border: black solid;
}
.div2 {
overflow: auto;
height: 100%;
border: black solid;
}
<!-- Start Left Column-->
<div id="leftColumn" class="leftContent">
<div id="div1" class="div1">
CONTENT
</div>
<div id="div2" class="div2">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT
</div>
</div>
<!-- End Left Column-->
<!-- Start Centre Column-->
<div id="centreColumn" class="centreContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Centre Column-->
<!-- Start Right Column-->
<div id="rightColumn" class="rightContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Right Column-->
Thanks for your help.
Why you're using "position: absolute ?
Remove position, left, right bla bla and
.leftContent { float:left;}
.centreContent {float:left;}
.rightContent {float:right;}
use this CSS Codes...