|
CSS - Two Elements On Same Line With 100% Flexible Width?
Okay, so I want to get an image (left) and a div container (right) positioned on the same line.
The image is 225x225, and I want 15px of space between the image and div container; the div container should also fill in the rest of the width on that page. HTML = <img id="logo" src="logo.gif" width="225" height="225"><!- insert 15px spacing --><div id="navbox"><!-- 100% width? --></div> and, CSS = ? Thanks! Similar TutorialsHi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... The template I am working on is a simple HTML page that I want to modify to work in Joomla. However the look of the site is not quite the same in Firefox (where it looks good) and IE8 where one part of it I could not make right for two days. The left sidebar is shorter and the content right side is shorter and not aligned. I am aware that is something small but I could not get it right. Please help. The URL is: compasstgdotcom/~orak the css in questions is: base.css Thank you all hi- i'm trying to NOT to use a table to layout my web page but it is difficult to get two divs side by side without one! for example... here is a very simplified page of something i'm working on: http://phil.quietthenloud.net/csstest/test.html everything enclosed in the 1px blue border is the menu. everything enclosed in the 1px red border is the content. both sections are divs that i can't seem to get side by side without using a table as you can see in the html. i tried using "display:inline;" on both sections and that doesn't even come close. it shrinks the div down to the minimum possible. any ideas? thanks in advance!!! Code: <?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<style type="text/css">
<!--
#content
{
border: 1px solid #FF0000;
height: 400px;
width: 300px;
}
#menu
{
background-position: top right;
background-repeat: no-repeat;
border: 1px solid #0000FF;
height: 400px;
width: 400px;
}
#menu_line1
{
height: 25px;
margin-left: 5px;
}
#menu_line2
{
height: 25px;
margin-left: 27px;
margin-top: 15px;
}
#menu_line3
{
height: 25px;
margin-left: 34px;
margin-top: 25px;
}
#menu_line4
{
height: 25px;
margin-left: 19px;
margin-top: 20px;
}
#navigation
{
height: 100px;
width: 300px;
}
#text
{
height: 300px;
width: 300px;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="menu" style="background-image: url('images/black.png');">
<div id="menu_line1"><img alt="" src="images/red.png" /></div>
<div id="menu_line2"><img alt="" src="images/green.png" /></div>
<div id="menu_line3"><img alt="" src="images/orange.png" /></div>
<div id="menu_line4"><img alt="" src="images/yellow.png" /></div>
</div>
</td>
<td>
<div id="content">
<div id="text"><img alt="" src="images/purple.png" /></div>
<div id="navigation"><img alt="" src="images/blue.png" /></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Hi there! I've been diving into trying to make mobile web pages and though a lot of my former CSS experience helps me a great deal I get a bit perplexed about forms. I'd like to have all my form elements at the width of a 100% except for checkboxes and radiobuttons. Now, this almost works out all the way but I have a problem with how the strict rendering handles form elements. I've tried using both XHTML Mobile 1.2 and XHTML Mobile 1.0 but the same problems arise; Apart from wanting the elements to go 100% in width, I also would like them to respect margins. If I simply set the width to a 100% and my right and left margins to, say, 5px, I get the field pushed in 5 pixels from the left but I cannot get the 5 pixel indent from the right. I have tried using a wrapper div but it suffers the same result. I have figured out that this can have something to do with the rules of mobile pages provided by the XHTML mobile rendering specification but I'm now wondering if there's anything I can do to accomplish this. I've found out that mobile pages that have full width elements look (in almost all cases) very good on most handsets I've tested. Thanks in advance! source: bluewebpages.com/photography/album3/1 i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning) mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue. thanks, amory EDIT FIXED - need a float: left; Hi guys, When a div element displays a vertical scrollbar the width of the scrollbar is subtracted from the width of the element, so for example if the div has a width of 200px and the scrollbar is 18px, the 18px of the scrollbar is subtracted from 200px, this means that now 182px of the div is now visible, with the scrollbar occupying the other 18px. Is there a way to make the scrollbars add to the width of the element so when the scrollbar becomes active the viewable area of the DIV is still 200px and the width of the div + scrollbar is 218px. I've been playing around with some JavaScript/DOM type solutions, by using to the scrollHeight elementHeight variables to detect when the scrollbar is present and then changing the width of the div element, but I was wondering if there was a more elegant and less verbose solution using css? Regards, Khmer42 Hi, Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element. Every thing works fine when we set such styles on div or table elements, but failed on anchor tags Working on Code: <style>
div:first-letter{font-weight: bold;}
</style>
<div>
Pseudo Div<br>
Line Two<br>
Line Three<br>
</div>
Failed On Code: <style>
a:first-letter{font-weight: bold;}
</style>
<a href="">
Pseudo Div<br>
Line Two<br>
Line Three<br>
</a>
Can anyone give me the solution for this. Thanks in advance! I have a few div on my page and the ones that have long lines or URL's are expanding width-wise. Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: Hi Guys, I have been recently playing with some HTML/CSS and I cannot figure out a way to make my website to be flexible. I have attached a link to the screenshot to show what happens when I reach out of height. I am using min-height but I doesn't seem to responde. http://screencast.com/t/NNx4fxkFAc I will also upload my CSS and HTML code. I tried to keep it clear and easy to read. I really appreciate any help as I have been trying to fix it whole day, getting sort of desperate. Code:
/*---------- Header Start ---------- */
#header {
background:url(images/topbar_slice.png) repeat-x;
height: 268px;
}
#logo { background:url(images/logo.png) no-repeat;
position: absolute;
padding-bottom: 30px;
top: 7%;
left: 3%;
width:320px;
height:90px;
}
#logo h1, #logo small {
display:block;
text-indent:-9999px;
}
ul#menu {
margin:0px; padding:0px;
position:relative;
left:0px;
top: 10px;
}
ul#menu li {
display:inline;
margin-left:50px;
margin-bottom: 10px;
}
ul#menu li a {
text-decoration:none;
color:#ffffff;
font-family:Helvetica, Verdana, Arial, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#D8D8D8 ;
}
#search {
background: url(images/search_field.png) top no-repeat;
width:178px;
height: 30px;
position: absolute;
right: 5%;
top: 1%;
}
#search_button {
background-image: url(images/search_icon.png);
background-repeat: no-repeat;
width:20px;
height: 20px;
position: absolute;
right: 10%;
top: 6px;
}
/*--------- Header End -----------*/
/*--------- Body Start ---------- */
body {
font-family:Helvetica, Arial, sans-serif;
color:#7f7d78;
font-size:16px;
line-height:23px;
}
.block_inside {
display:block;
border:10px solid #ffffff;
background: #ffffff url(images/backgroud_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
#main {
background:#c4c0be;
}
#main .container {
background:url(images/background_slice.png) repeat-y;
min-height: 700px;
position: relative;
margin: -0.8% 15% 0% 15%;
border:1px solid #a3a09e;
}
.text_block {
float: left;
padding-right: 40%;
margin-left: 40px;
width: 230 px;
height: 400px;
text-align: justify;
font-family: Helvetica, sans-serif, Arial;
}
h2 {
margin:60px 0px 10px 0px;
line-height:23px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}
/*--------- Body End ------------ */
/*--------- Sidebar Start -------- */
#sidebar {
background-image: url(images/sidebar_slice.png);
background-repeat: repeat-y;
position: absolute;
width: 285px;
margin: -18.3% 0 50% 0;
height: 80%;
right: 30px;
}
#sponsor {
background: url(images/edit.png) no-repeat;
width: 200px;
height: 200px;
position: absolute;
top: 30px;
left: 10px;
}
#sidebar_text {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
margin-left: 40 px;
}
/*--------- Sidebar End ------- */
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Almost Student</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="main">
<!------------MAIN------------>
<div class="container">
<!------------Header---------------------------->
<div id="header">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Articles</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact</a></li>
</ul>
<div id="search">
<div id="search_button">
</div><!--search button end-->
</div> <!--search end-->
<div id="logo">
<h1>Almost Student</h1>
</div> <!--logo end-->
</div> <!--header end-->
<!------------Header End----------------------------->
<!------------Content----------------------------->
<div id="post_block">
<span>
<div class="text_block">
<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" /> -->
<h2>Post</h2>
<small>test</small>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
<a href="a" class="button">Continue reading...</a>
<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" /> -->
<h2>Post</h2>
<small>test</small>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
<a href="a" class="button">Continue reading...</a>
</div>
</span>
</div>
<!------------Content End----------------------------->
<!------------SIDEBAR--------------------------------->
<div id="sidebar">
<div id="sponsor">
</div><!--sponsor end-->
</div><!--sidebar end-->
<!------------SIDEBAR END-------------------------------->
</div> <!--container end-->
</div> <!--main end-->
<!------------MAIN END------------>
<div id="footer">
<div class="container">
All rights reserved. Almoststudent.com
</div> <!-- container-->
</div> <!-- footer -->
</body>
</html>
I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow. I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea. http://www.ryanbuckley.ca/BRIT/drawings.php Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... |
|||||||