http://jsfiddle.net/TomasRR/WuNL3/1/
Code works perfectly when there is no p's and h's in the divs. Once I put some text everything goes out of order.
<div class="cont">
<div class="left">
</div>
<div class="right">
</div>
</div> <!-- .cont -->
css
body {
width:100%;
margin:0;
padding:0;
}
.cont {
white-space:nowrap;
width:100%;
}
.left {
border:1px solid red;
width:50%;
height:200px;
display: inline-block;
}
.right {
border:1px solid black;
width:50%;
height:200px;
display: inline-block;
}
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
}
when the text is added with p's and h's the html looks like that
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
<a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a>
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p
</div>
It's better to look at fiddle... What I want ? I want blocks to stay in one line kind of, not to drop down.
Add vertical-align: top; to your .left style
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
Can somebody please help me with this piece of code?
HTML:
<div id="container">
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
#container {
margin:auto;
text-align:center;
padding:10%;
}
.block {
width:240px;
height:300px;
background: red;
display:inline-block;
}
jsfiddle
I want it so that the whole container aligned in the middle but when there is an extra block at the bottom, it should go to the left. Is that possible?
This works:
HTML:
#container {
margin:auto;
text-align:center;
width:70px;
overflow:hidden;}
CSS:
.block {
width:24px;
height:30px;
float:left;
margin:5px 5px;
background: red;}
See the jsfiddle here. I changed the sizes so that it's easier to see but you can readjust them according to your site. Basically, you need overflow:hidden; and set the width of the container so that it can only fit 2 blocks per row so that the next block goes underneath and is aligned to the left. Also, remember that ids must be unique in your page; if you need more than one element with the same definition then you must use classes.
I would use float: left in block id,remove container from css and use class instead of id because id must be used once:
HTML:
<div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
.block {
width:40%;
height:300px;
margin: 5%;
float: left;
background: red;
display:block;
}
Try this plugin for jQuery to help you organize the DIV.
desGridLayout:
http://des.delestesoft.com:8080/?go=8
I solved my own problem with #media queries :
#media screen and (max-width: 840px) {
.portfolio_container {
width:512px;
}
}
#media screen and (max-width: 580px) {
.portfolio_container {
width:255px;
}
}
I know media queries are not compatible with older browser versions! but at least it is supported by all most recent versions!
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.
I'm having problems with my page's layout. I'm trying to do a header, 3-column, footer layout, all centered. Here is my code:
css:
#pgCenter
{
text-align:center;
margin: 20px;
}
#container
{
text-align:left;
width: 850px;
margin: 0 auto;
}
#container #header
{
width:100%;
text-align:center;
}
#container #col1
{
width: 250px;
float: left;
}
#container #col2outer
{
width: 600px;
float:right;
}
#col2outer #col2mid
{
width: 300px;
float: left;
}
#col2outer #col2side
{
width: 300px;
float: right;
}
#container #footer
{
text-align:center;
width: 100%;
}
html:
<body>
<div id="pgCenter">
<form id="form1" runat="server">
<div id="container">
<div id="header">
here is my header
</div>
<div id="col1">
This is where the login control goes. For testing purposes, I'll just throw some text in here.
</div>
<div id="col2outer">
<div id="col2mid">
<p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
I should also write some more text here because I still don't see anything going on :(</p>
</div>
<div id="col2side">
<p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
</div>
</div>
<div id="footer">
<p>(footer) Copyright © 2011</p>
</div>
</div>
</form>
</div>
</body>
The problem I'm having is that the header and footer content want to show up above and below either the first or outer (col2outer) columns, based on the size of its content, instead of all the columns in a neatly stacked fashion. This col2outer div also appears 1 <br/> lower than the first column.
I've looked at several posts here and elsewhere and can't find the right help. I'm not very good at css and would love any advice and tips I can get on best practice, what I'm doing wrong, etc. Thank you very much.
PS - please excuse my placeholding text hehe.
To solve the first problem, you just need to add clear: both to #container #footer, to clear the floats above it.
The #container #col2outer problem is because the p elements inside have some margin set by default.
Also, you should drop the extraneous #container from the start of all of the selectors.
With all of those changes: http://jsfiddle.net/thirtydot/z4U3d/
You're doing way too much
#pgCenter
{
text-align:center;
margin: 20px;
}
#container
{
text-align:left;
width: 960px;
margin: 0 auto;
}
#header
{
width:100%;
text-align:center;
}
#footer
{
text-align:center;
width: 100%;
}
.oneThirdContainer {
width: 300px;
float: left;
}
.clear {
clear: both;
}
</style>
<div id="pgCenter">
<form id="form1" runat="server">
<div id="container">
<div id="header">
here is my header
</div>
<div class="oneThirdContainer">
<p>This is where the login control goes. For testing purposes, I'll just throw some text in here.</p>
</div>
<div class="oneThirdContainer">
<p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
I should also write some more text here because I still don't see anything going on :(</p>
</div>
<div class="oneThirdContainer">
<p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
</div>
<div class="clear"></div>
<div id="footer">
<p>(footer) Copyright © 2011</p>
</div>
</div>
</form>
</div>
</body>
use overflow: hidden:
http://jsfiddle.net/zDbsQ/1/
Rather than try to point out what I see that's wrong with yours, I'll just show you how I would do it.
Essentially, you're describing 3 rows, the center row divided into 3 columns.
<!-- HTML -->
<div id="header">header</div>
<div id="middle">
<div id="col1">col 1</div>
<div id="col2">col 2</div>
<div id="col3">col 3</div>
</div>
<div id="footer">footer</div>
So, what you want to do is place the header and footer at a size that you're comfortable with, then allow the middle to take up space. As an example (and you'll want to adjust sizes):
/* CSS */
body {width:460px;}
body * {margin:0px; padding:0px;}
#header {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#middle {width: 960px; max-width:960px; max-height:800px; border:1px solid black;}
#footer {width: 960px; max-width:960px; height:100px; border:1px solid black;}
#col1 {width:315px; height:100px; border:1px solid black; display:inline-block;}
#col2 {width:316px; height:100px; border:1px solid black; display:inline-block;}
#col3 {width:315px; height:100px; border:1px solid black; display:inline-block;}
That should put col1, col2, and col3 inline within middle. I included borders only to exemplify their placement...
There you have it – simple three column layout. Not the most elegant, but it'll do. For more elegant ones, view:
http://www.alistapart.com/articles/holygrail/