three div side by side
-
This doesn't seem like it should be that hard, so if someone could just give me a kick in the right direction, that'd be awesome. I have googled for two div bellow code : $(function() { var right = $("#center"); $("#toggle").click(function() { $("#left").animate({ "width": "toggle" }, { duration: 250, step: function() { right.css("margin-left", $(this).width()); } }, function() { right.css("margin-left", $("#left").width()); }); }); }); #left { width: 270px; float: left; border: solid 1px red; } #center { margin-left: 270px; border: solid 1px green; } <pre lang="xml"><div id="left"> Test</div> <div id="center"> Test Right</div></pre> now guess that i have three div, i wanna to have same as above. ------------------------------- |left div|center div|right div | ------------------------------- the right and left div are always 170 px (for ex.) and i wanna do that when my left div is empty my center div become bigger (same as below code) and all three div should be side by side .and when my left div is empty the center div become bigger and right div be side of center div. Thanks in advanced !</x-turndown>
-
This doesn't seem like it should be that hard, so if someone could just give me a kick in the right direction, that'd be awesome. I have googled for two div bellow code : $(function() { var right = $("#center"); $("#toggle").click(function() { $("#left").animate({ "width": "toggle" }, { duration: 250, step: function() { right.css("margin-left", $(this).width()); } }, function() { right.css("margin-left", $("#left").width()); }); }); }); #left { width: 270px; float: left; border: solid 1px red; } #center { margin-left: 270px; border: solid 1px green; } <pre lang="xml"><div id="left"> Test</div> <div id="center"> Test Right</div></pre> now guess that i have three div, i wanna to have same as above. ------------------------------- |left div|center div|right div | ------------------------------- the right and left div are always 170 px (for ex.) and i wanna do that when my left div is empty my center div become bigger (same as below code) and all three div should be side by side .and when my left div is empty the center div become bigger and right div be side of center div. Thanks in advanced !</x-turndown>
#left { float: left; } #main { float: left; } #right { float:right; } <div id="left"> </div> <div id="main"> <div id="right"> </div> </div> Try that. I think it will do what you described.
-
#left { float: left; } #main { float: left; } #right { float:right; } <div id="left"> </div> <div id="main"> <div id="right"> </div> </div> Try that. I think it will do what you described.
thanks in advanced but its not working! In other word :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#left
{
width: 270px;
float: left;
border: solid 1px red;
}
#center
{
margin-left: 10px;
width: 740px;
border: solid 1px green;
float: left;
margin-right: 10px;
}
#right
{
width: 255px;
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<div id="left">
Test Left</div>
<div id="center">
Test center</div>
<div id="right">
Test Right</div>
<br />
<br />
</form>
</body>
</html>this is image when i have three divs : http://i49.tinypic.com/35l85jc.jpg and when the left div is empty i wanna have like : http://i49.tinypic.com/24zfwug.jpg
-
thanks in advanced but its not working! In other word :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#left
{
width: 270px;
float: left;
border: solid 1px red;
}
#center
{
margin-left: 10px;
width: 740px;
border: solid 1px green;
float: left;
margin-right: 10px;
}
#right
{
width: 255px;
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<div id="left">
Test Left</div>
<div id="center">
Test center</div>
<div id="right">
Test Right</div>
<br />
<br />
</form>
</body>
</html>this is image when i have three divs : http://i49.tinypic.com/35l85jc.jpg and when the left div is empty i wanna have like : http://i49.tinypic.com/24zfwug.jpg
I believe you will need conditional execution to achieve it. msdn.microsoft.com/en-us/magazine/ee335716.aspx
"It's true that hard work never killed anyone. But I figure, why take the chance." - Ronald Reagan That's what machines are for. Got a problem? Sleep on it.
-
I believe you will need conditional execution to achieve it. msdn.microsoft.com/en-us/magazine/ee335716.aspx
"It's true that hard work never killed anyone. But I figure, why take the chance." - Ronald Reagan That's what machines are for. Got a problem? Sleep on it.
thnaks in advanced but i wanna do without Ajax or ... Just with CSS only! Thanks in advanced !
-
This doesn't seem like it should be that hard, so if someone could just give me a kick in the right direction, that'd be awesome. I have googled for two div bellow code : $(function() { var right = $("#center"); $("#toggle").click(function() { $("#left").animate({ "width": "toggle" }, { duration: 250, step: function() { right.css("margin-left", $(this).width()); } }, function() { right.css("margin-left", $("#left").width()); }); }); }); #left { width: 270px; float: left; border: solid 1px red; } #center { margin-left: 270px; border: solid 1px green; } <pre lang="xml"><div id="left"> Test</div> <div id="center"> Test Right</div></pre> now guess that i have three div, i wanna to have same as above. ------------------------------- |left div|center div|right div | ------------------------------- the right and left div are always 170 px (for ex.) and i wanna do that when my left div is empty my center div become bigger (same as below code) and all three div should be side by side .and when my left div is empty the center div become bigger and right div be side of center div. Thanks in advanced !</x-turndown>
-
thanks for solution but i wanna to have something like this and increase center div width automatically
Quote:
this is image when i have three divs : http://i49.tinypic.com/35l85jc.jpg and when the left div is empty i wanna have like : http://i49.tinypic.com/24zfwug.jpg
