I've been working on our company website this morning and I've hit a bit of a problem. I have the page formatted into two cells, one on the right and one on the left. The one on the right contains an image which is around 790 pixels wide. When I shrink the browser window to the point to where it will no longer fit, the whole cell jumps below the first cell. How can I prevent this from happening?
Code...
xhtml
<!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>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}
Try to set an id to the div that wraps everything (e.g. <div id="wrapper" style="padding-left:15%;">) and create a CSS selector for it where you specify a minimum width:
#wrapper {
min-width: 900px;
}
The width you should choose according to the minimum width where the image div doesn't wrap. Of course, now that you have a selector for the wrapper, you could move the padding-left into the CSS as well instead of having it inline.
Here's and example fiddle
You can try to make the width of your cells dynamic. If you use a percentage instead of a fixed width it will automatically adjust to the window size.
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
Just Don't provide the width of imageSide because it must adjust with remaining width of browser window while loginSide must stick to its own solid width.
Try this fiddle.
One more thing, you are using float: left in both loginSide and imageSide, just use it at loginSide, imageSide will than adjust automatically.
Here is the updated fiddle.
And, finally if you want your own code without any much altration, i got this also for you. :)
Here is the your second updated fiddle with imageSide width:792px also..
Cheers.. :)
Figured it out, I wrapped the image in this div:
<div style = "overflow: hidden;">
Related
I just started developing a personal homepage for my own. Everything went well until I wanted to write text outside the menu border and header (that means somehow center of the page). If I add any paragraph in HTML file, it actually moves the menu items & Header and then places the text. I don't know what's going wrong.
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header{
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph{
text-align:center;
}
#menu_area{
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
}
body{
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer{
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home{
font:bold 20px Tahoma;
text-align:left;
}
#about_me{
font:bold 20px Tahoma;
text-align:left;
}
#gallery{
font:bold 20px Tahoma;
text-align:left;
}
#contact_me{
font:bold 20px Tahoma;
text-align:left;
}
#my_diary{
font:bold 20px Tahoma;
text-align:left;
}
#blog{
font:bold 20px Tahoma;
text-align:left;
}
</html>
if you add the p before your header and menu-area, it will appear before header and menu-area, if you want it to appear after header and menu-area, add it after them
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p>This is a paragraph i am trying to place in my page, but it doesn't stay in the accurate position.</p>
<div id="footer">Developed by Jabir Al Fatah</div>
P.S: if you want your p to appear next to menu-area and not below it, change display of menu-area and p to inline-block
something like this: http://jsfiddle.net/ZCmg8/
UPDATE: http://jsfiddle.net/ZCmg8/1/
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
I have a page with this elements:
<body>
<div class="C2">
<div class="Ban">
<div class="blockWithLabel position BankCode">
<span>BankCode</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BranchCode">
<span>BranchCode</span>
<br />
<input type="text" style="width:500px"/>
</div>
<div class="blockWithLabel position AccountNumber">
<span>AccountNumber</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position CheckDigits">
<span>CheckDigits</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BankName">
<span>BankName</span>
<br />
<input type="text"/>
</div>
<div class="position validator">
<div class="validator">VALIDATOR</div>
</div>
</div>
</div>
</body>
I want to apply this style:
.Ban { overflow:hidden }
div.blockWithLabel { display:inline-table; overflow:none; }
.C2 { background-color: blue; }
.C2 div.blockWithLabel { background-color:yellow; margin:2px;}
.C2 div.position { float:left}
With all browsers, I have (if the width of the screen is enough big) 6 elements in the same line
Now, I want to make breaks using
.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }
The problem is that with IE7, AccountNumber appears in a new line, but the next elements CheckDigit and BankName doesn't appear in the same line but in the previous !!
How can I fix it ?
use conditional comments for IE7
<!--[if lte IE 7]>
<style type="text/css">
/* hide other layout for other browsers by
setting display to none
*/
.C2 {
display:none;
}
</style>
Use ie7 formatting here with tables instead of divs.
<table>
<TR>
<T...................
<![endif]-->
I think this is very basic CSS question .
But here is the fiddle and below is the code
http://jsfiddle.net/G6pqC/
<!DOCTYPE html>
<html>
<head>
<style>
#topDiv {
width:280px;
height:500px;
background-color:red;
}
.element{
position:relative;
right :100px;
}
</style>
</head>
<body>
<div id="topDiv">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input class='element' type="button" value="button4" />
<input type="button" value="button5" />
</div>
</body>
</html>
Can I know how I can move button5 to the first line and as a last element ? I moved button 4 to right and now I have place in the first line , But still button5 is going to the next line . Any one please ?
Thanks for your help
Can you increase the width of #topDiv? Like this:
#topDiv {
width:320px;
height:500px;
background-color:red;
}
http://jsfiddle.net/G6pqC/1/
Here you go - Check this Demo
#topDiv {
width:280px;
height:500px;
background-color:red;
}
input[type="button"]{ margin: 0 0 0 -4px; }
input[type="button"]:first-child { margin: 0; }
Okay, loaded it in Firefox and now I'm seeing it. Just adjust the font size on the buttons.
.element{
font-size:11px;
float:left;
margin-right:5px;
}
#topDiv {
width:280px;
height:500px;
background-color:red;
position:relative;
}
.moved{position:absolute;right:150px;}
<!DOCTYPE html>
<html>
<body>
<div id="topDiv">
<input class='element' type="button" value="button1" />
<input class='element' type="button" value="button2" />
<input class='element' type="button" value="button3" />
<input class='element moved' type="button" value="button4" />
<input class='element' type="button" value="button5" />
</div>
</body>
</html>
#topDiv {
width:280px;
height:500px;
background-color:red;
}
.element{
float: right;
}
<!DOCTYPE html>
<html>
<body>
<div id="topDiv">
<input class='element' type="button" value="button1" />
<input class='element' type="button" value="button2" />
<input class='element' type="button" value="button3" />
<input class='element' type="button" value="button4" />
<input class='element'type="button" value="button5" />
</div>
</body>
</html>
not sure if this is what ur after but there.
This should be a no brainer but I have a small mystery with the CSS for a pair of divs. Here is the HTML:
<body>
<form id="form1" runat="server">
<div class="centered" id="selectReport">
<asp:DropDownList ID="p0" runat="server"></asp:DropDownList>
<asp:Button ID="viewReport" runat="server" Text="View Report" OnClick="ViewReport" />
</div>
<div>
...a centered table...
</div>
<div class="centered" id="buttons">
<asp:Button runat="server" ID="saveEdits" Text="Save Edits" OnClick="SaveEdits_Click" />
<asp:Button runat="server" ID="redoEdits" Text="Redo Edits" OnClick="RedoEdits_Click" />
</div>
</form>
</body>
If I put this CSS in the same file:
<style>
.centered
{
margin: auto;
}
</style>
Both of the divs are left justified.
However if I put this CSS in a separate file:
.centered
{
margin: auto;
}
the first div is left justified while the second div is centered. I also tried writing identical CSS for each div id with the same results -- the first one is left justified while the second is centered.
Here is the screenshot:
And here is the rendered HTML:
<!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><title>
Network Operations Dashboard
</title>
<link href="NetworkOperations.css" rel="Stylesheet" type="text/css" /></head>
<body>
<h1 style="text-align: center; font-size: 30pt" >Network Operations Dashboard</h1>
<form method="post" action="NetworkOperationsReport.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAyNTkyMjcyNw9kFgICAw9kFgQCAQ8QDxYGHgxBdXRvUG9zdEJhY2tnHg1EYXRhVGV4dEZpZWxkBQ9BcmNoaXZlRmlsZU5hbWUeC18hRGF0YUJvdW5kZ2QQFQYURGFzaGJvYXJkXzIwMTItTWF5LTEGVHJlbmRzBlN0eWxlcwdTY3JpcHRzCEFwcF9EYXRhB0FjY291bnQVBhREYXNoYm9hcmRfMjAxMi1NYXktMQZUcmVuZHMGU3R5bGVzB1NjcmlwdHMIQXBwX0RhdGEHQWNjb3VudBQrAwZnZ2dnZ2dkZAIFDxYCHgdWaXNpYmxlaGRkUrfXkiabK3mrjfzXNLtumhzsq/lXy+2nab/n0oCTc60=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebApp/WebResource.axd?d=J72WHhxz11o7F4T65-nk2s6O8A5yTLJdKan5j1GWRlsyEEDvOExumPz8U-TIG_EGGghKU7cpVHXCxLarpokjZhHzOtYqhdwyIhY1CB4wM9o1&t=634746614287359483" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLY4tiyDgLwppLRBwKPpuCFAgLH2cPODQLV24ysCQLizdSlDwKFsO2xAgLfhdOhDAK46ZnWCAKVndrNAwK4r5OaCipKQs8Qpkd25hYiUSafRFyvUGzpZRXvRzfKNuVsC9Js" />
</div>
<div class="centered" id="selectReport">
<select name="Archives" onchange="javascript:setTimeout('__doPostBack(\'Archives\',\'\')', 0)" id="Archives">
<option selected="selected" value="Dashboard_2012-May-1">Dashboard_2012-May-1</option>
<option value="Trends">Trends</option>
<option value="Styles">Styles</option>
<option value="Scripts">Scripts</option>
<option value="App_Data">App_Data</option>
<option value="Account">Account</option>
</select>
<input type="submit" name="viewReport" value="View Report" id="viewReport" />
</div>
<div class="centered" id="buttons">
<input type="submit" name="saveEdits" value="Save Edits" id="saveEdits" />
<input type="submit" name="redoEdits" value="Redo Edits" id="redoEdits" />
</div>
I must be missing the blindingly obvious but I am stumped. Any advice is appreciated.
Regards.
Try giving your divs a fixed width and centering them:
.centered {
margin: 0 auto;
width: 60%; // or whatever you need.
}
To center a div you usually need to have given it a concrete width.
Your div is likely already centred (although if your CSS rules are, literally, just margin: auto, they're not doing anything until you specify a width on your div). The issue is that the controls inside it (your form fields) are not.
Try adding text-align: center; to your .centered CSS rules.
Remember input elements are inline elements, meaning they are affected by rules that would apply to text (like text-align, line-height, text-indent etc.).
You can see this for yourself by using some developer tools to inspect what's going on. IE has some, WebKit browsers like Chrome and Safari have them, Firefox has them, Opera does too. With them, you can (in real time) understand how your CSS rules affect layout, and the shape of the elements on the page.
Answer provided by a comment from Kit Grose: http://jsfiddle.net/ZrdUY/1/.