I am new to web design using tableless and I'm having problem positioning some elements on my page..
Here's the sample html: http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg
As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.
CSS:
.container {
width:88%;
}
#header {
background:#CCCCCC;
margin-bottom:5px;
padding-bottom:2px;
height:100px;
text-align:center;
}
#content {
background: #0099CC;
margin-bottom:5px;
}
#main {
margin: .5em 0 0 0;
text-align: left;
width:80%;
}
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
height: 100%;
min-height: 200px;
}
#right .top {
top:0;
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0;
display:block;
background-color:#FFCCFF;
height:30px;
}
#center {
background:#00FF99;
padding: 5px 0 0 10px;
float:left;
}
#footer {
clear:both;
height:30px;
background-color:#CCFF33;
width:80%;
text-align:left;
}
HTML markup:
<div class="container showgrid">
<div id="header">
<h1>Header</h1>
</div>
<div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
<div id="main">
<div id="center">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Content here</p>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
This is not exactly the answer to your problem, but it should get you on the right track.
Behold! The Holy Grail!
If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.
css :
#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer
{float:left;}
html :
div.header <br>
div.center + div.left <br>
div.footer + div.right
should be like this/
Related
I have two rows like this
<div class="container me">
<div class="message">
</div>
<div class="time">
</div>
</div>
<br />
<div class="container he">
<div class="message">
</div>
<div class="time">
</div>
</div>
with css like this
* {
padding:0;
margin:0;
}
.container {
width:500px;
height:50px;
outline:1px solid green;
}
.message {
width:250px;
height:50px;
border:1px solid red;
display:inline-block;
border-radius:5px;
position: relative;
}
.time {
width:50px;
height:50px;
background:orange;
}
.container.me .time {
float:right;
}
.container.he .time {
float:left;
}
and i am trying to make message block full possible width (100% minus time block), is it possible?
jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/
You can set width for .message to width: calc(100% - 52px); - this 52px is a width of your .time div (50px) + 2px for borders of .message (left and right)
Edit: For IE8 support you cannot use that, so you can try the tricky thing like this: https://jsfiddle.net/L2pqhnsq/
I'm currently developping a website and encountered a problem with CSS.
I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.
At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.
I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);
I'm not sure what I'm doing wrong but having trouble applying background color for #content. But it works fine if I set the height value to let say 800px. but I want it to be either auto or 100% as this template will be used throughout the site. any advice would be greatly appreciated.
<div class="content_bg">
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
</div>
</div>
<div class="footer_bg">
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</div>
/*
====================================================================
Content Area
====================================================================
*/
.content_bg
{
background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
overflow:hidden;
}
#content
{
width:980px;
margin:auto;
height:auto;
background:#fff;
}
#contentLeft
{
float:left;
width:209px;
margin-top:50px;
}
#contentRight
{
float:right;
width:770px;
margin:20px 0 0 0;
}
/*
====================================================================
Footer
====================================================================
*/
.footer_bg
{
background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
clear:both;
}
#footer
{
width:980px;
height:258px;
margin:auto;
background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
width:400px;
height:50px;
float:left;
padding: 20px 0 0 25px;
}
#footerRight
{
width:100px;
height:50px;
float:right;
padding: 20px 0 0 0;
}
Set the overflow to auto for #content.
#content {
width:980px;
margin:auto;
height:auto;
background:#fff;
overflow:auto;
}
The problem is that #content has no content. Since you are using height:100% for the div's height, it will expand to the full height of its parent div (i.e. .content_bg). However, .content_bg has no content either; therefore it is expanding to 100% of zero.
Try adding the class to your id <div id="content" class="content_bg"> and erase the class. And give your class these propertis
.content_bg
{
background-color: white;
width: 100%;
height: 100%;
}
Then the content in your id "content" will define the width and height.
You are having a problem applying background to #content because you didn't clear the floats. Add
<div style="clear:both"></div>
After
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
i have trying to achieve this
| Div | |Div nav wrapper|
| logo |
|container|| Div banar container |
| || |
i hv tried this
<div class="grid_12">
<!--logo_container start here-->
<div id="logo_container">
</div>
<div style="margin-top: 57px" class="grid_13">
<div id="banar_container">
</div>
</div>
<!--logo_container end here-->
<div id="nav_wrapper">
<ul id="nav">
<li class="current_page_item">Home</li>
<li>My Profile</li>
<li>LogOut
</li>
</ul>
</div>
<!--#nav_wrapper-->
</div>
and the css are
.grid_12 {
width:940px;
}
.grid_13 {
width:851px;
}
#logo_container{
float:left;
margin-top:20px;}
#logo{
background:url(../images/bp.jpg) no-repeat left;
width:100px;
float:left;
height:100px;
}
#banar_container
{
float: left;
}
#banar
{
background:url(../images/Banner1.png) no-repeat left;
width: 851px;
float:left;
height: 71px;
}
#nav_wrapper {
position:relative;
display:inline;
float:right;
margin-right:25px;
margin-top:6px;
height:50px;
}
its not coming that way.. so what should i do?
this is my complete code ... this is what i am trying but failing to do it ... so guys pls take a look at this and tell me my fault
guys i am still struggling with this
I hope you'll find this example useful. Notice that, as you said, the size is fixed but still fluid relative to it's parent by using percentage.
HTML
<div id="example">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
CSS
#example {
width: 400px;
height: 400px;
}
div.box01 {
float: left;
width: 20%;
height: 100%;
background-color: #eee;
}
div.box02 {
float: right;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
}
div.box03 {
float: right;
width: 80%;
min-height: 100px;
background-color: #aaa;
}
Code Example
The trick is to realize you need more divs than just those three. That is to say, divs 2 and 3 need to have a parent that is a sibling of div 1. Try something like this: http://codepen.io/anon/pen/rLDqc
HTML:
<div id="left">This is your div on the left</div>
<div id="center">
<div id="main">Hello, this is the third div</div>
<div id="right">This is the div in the top right</div>
</div>
<div class="clear"></div>
CSS:
#left{
width:30%;
background:red;
height:100px;
}
#center{
width:70%;
background:blue;
height:100px;
}
#left, #center{
float:left;
}
#right{
position:relative;
display:inline;
float:right;
}
#main{
margin-top: 57px;
float: left;
}
.clear{
clear:both;
}
You may do something like this:
<div class="wrapper">
<div class="div1"></div><div class="div2"></div>
<div class="div3"></div>
</div>
and CSS:
div{border:solid 1px black;}
.div1 {
width:50px;
height:100px;
float:left;
}
.div2 {
width:50px;
height:18px;
float:right;
}
.div3 {
width:250px;
height:80px;
float:left;
}
.wrapper{
width:304px;
border:none;
}
Demo
Or maybe even something like this: http://jsfiddle.net/4YX9H/1/ - width and height of div2 may be almost any (it just must be not wider than its parent)
#div1 {
width: 100%;
}
#div2, #div3, #div4 {
width: 33.3%;
float: left;
}
<div id="div1">
<div id="div2"></div><div id="div3"></div><div id="div4></div>
</div>
Change width of inside divs according to your needs.
Most confusing job in web designing for me is to align divs like these but if you understand every aspect of float, display and some other properties important for layout designing then you can easily create such layouts.
Check this fiddle for an example
http://jsfiddle.net/DeepakKamat/xQKXz/1/
The HTML :
<div class="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>
The CSS :
.container {backgroundcolor:yellow;display:block;width:400px;height:150px;padding:10px;}
.container div {margin:2px;color:white;}
#div1 {background-color:blue;width:20%;height:100%;border:2px dashed white;float:left;}
#div2 {background-color:green;display:inline-block;width:20%;height:70px;float:right;border:2px dashed white;}
#div3 {background-color:red;display:inline-block;width:76%;height:48%;border:2px dashed white;}
I hope this helps you.
Not sure what is the values of your div width and height.
Check this DEMO
Updated DEMO