here is the structure of my html
<style>
.left {
float:left;
width: 450px;
}
.center {
float:left;
width: 150px;
}
.right {
float:right;
width:450px;
}
</style>
<div>
<div class="left">
</div>
<div class="center">
Add
</div>
<div class="right">
</div>
</div>
The content of the left div is a table loaded via ajax. What I would like to do is have the link vertically centered (or darn close) dynamically so that when teh table is loaded and that div changes in height my link then moves appropriately. I've created a grid view control on this table and based on the selected value I want to use the link to populate the right column. Any help would be appreciated. The center div has a fixed width but height would probably fill the containing div to allow for vertically centering.
<style>Update
.left {
float:left;
width: 450px;
}
.center {
width: 150px;
margin-left:auto;
margin-right:auto;
}
.right {
float:right;
width:450px;
}
</style>
<div>
<div class="left">
</div>
<div class="center">
Add
</div>
<div class="right">
</div>
</div>
P.D: Don't forget to tick , thanks :D
Related
I'm using the twitter bootstrap and I am having a hard time figuring out how to separate the background color of two columns that are inside of a main container div, yet have it go full-width.
Here is a fiddle of what I have so far: http://jsfiddle.net/seeplanet/ZTbwz/
My main problem is that I want to have the two columns centered on the page and not extending to either side. That is why I have the max-width set on the container.
My HTML:
<div id="featured-content">
<div class="container">
<div class="row">
<div class="col-sm-9">
Featured Video or Image Gallery
</div>
<div class="col-sm-3">
Other Information
</div>
</div>
</div>
</div>
My CSS:
#featured-content {
background-color: #c7591f;
padding: 20px 0px;
}
.container {
max-width: 960px;
margin:0 auto;
}
.col-sm-9{
width:75%;
float:left;
background:yellow;
}
.col-sm-3{
width:25%;
float:left;
}
}
And this is what I would like it to look like:
Add display:table; to your container like this:
.container {
max-width: 360px; /* If I remove this, then it works, but then my content is not centered */
margin:0 auto;
display:table;
}
JS Fiddle
http://jsfiddle.net/grrenier/3TE4X/1/
Try this other JS Fiddle:
http://jsfiddle.net/grrenier/3TE4X/2/
I'm building responsive website and have a problem with aligning div.button to align with bottom side of the image.
Here is the code: http://jsfiddle.net/E22nq/
I would like to have div.button aligned with image, and dynamically hide text in div#text so that the width of the div.content is dependent on image (image height depends on the width of the browser).
HTML:
<div class="content">
<div id="left">
<img src="" />
</div>
<div id="right">
<div id="text">...</div>
<div class="button">BUTTON</div>
</div>
</div>
CSS:
.content {
width: 100%;
}
#left {
width:50%;
float:left;
}
#right {
width:50%;
float:left;
}
img {
width:100%;
}
try using
#right {
width:50%;
float:left;
clear:left;
}
I am using http://www.cssstickyfooter.com/ for a fluid header/footer/content page.
I am trying to do a two column layout for my site. Left div navigation; the right div content.
The left column has content vertically aligned in the center. The content is both vertically-aligned in the center as well as horizontally aligned in the center.
I'm stuck at laying out the navigation.
I would think I should be able to make a div for the nav container {float:left; width:300px;display:table;} then make the nav_content div something like {height:300px; display:table-cell; vertical-align:middle;}.
I thought at first the issue was that the container needs to span 100% height of whatever was left over after the footer and then the content would be able to vertically align the height. (The only thing I can find is 'background-hacks' to achieve this and Jscript to calculate and dynamically update absolute height. It doesn't seem right to me that those are the only options.) But when I set the parent div to a set height, then try and vertically-align the content, it still does not work. I really do not understand as all the resources I have read states that the parent contains table display and table-cell can use the vertical-align middle. (does using float mess this up?)
Here is a crudely drawn layout I am trying to accomplish.
http://i.imgur.com/VefhxU7.png
Here is the idea with the code.
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="container">
<div id="content">
</div>
</div>
<div id="side">
<div id="nav">
</div>
</div>
</div>
</div>
<div id="footer">
</div>
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: left;
position: relative;
width: 250px;
display:table;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:200px;
background-color: blue;
}
What am I doing wrong? Thanks for anyone who tries to help. :)
try this :
<style>
#footer {
background-color: #999;
}
#header {
background-color: #0C6;
}
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: right;
position: relative;
width: 70%;
display:table;
height: 350px;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:30%;
background-color: blue;
float: left;
}
</style>
<body>
<div id="mainContainer">
<div id="header">This is header</div>
<div id="nav">This is Nav</div>
<div id="side">This is side</div>
<div id="footer">This is footer</div>
</div>
</body>
I have two divs under menu of site: content and right-content.Right content is sidebar which is fixed to the right side of screen,and he has a wiht 200px.Content is div for content of site and I want him to start on the left side of the screen and to stop when it reaches the right-content.Some suggestions?
HTML code of DIVs:
<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>
CSS code:
#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}
#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}
You can use a wrapping div for the content, and padding or margins to do this. For example, the style sheet could look something like this:
.div-content-wrapper {
width: 100%;
}
.div-content {
margin-right: 200px;
}
.div-rightsidebar {
width: 200px;
position: fixed;
right: 0;
top: 0;
}
And the html would look like this:
<div class="div-content-wrapper">
<div class="div-content">
<h1> This content will not go further than 200px from the right side</h1>
</div>
<div class="div-rightsidebar">
<h4>Right bar content</h4>
</div>
</div>
The right sidebar can go inside or outside of the wrapper, it doesn't really matter.
I am quite new to css and html, and I am having trouble floating divs within a another div,
I've done quite a bit of research online but have not been able to come up with a solution.
these are the sites I have read and where of no use:
barelyfitz /screencast/html-training/css/positioning/
stackoverflow /questions/580195/css-layout-2-column-fixed-fluid
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
My code can be found on jsFiddle here
I hope this will help.
CSS:
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML :
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
Like this?
http://jsfiddle.net/Ev474/
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet.
Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right.
Each opened tag has to be closed tag.
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}