|
CSS - Div Inline Positioning
In the code below you see i have a container div. Inside of that are two divs. I would like the two divs to align side-by-side and valign to the top of the container div.
I can get them side-by-side, but not to valign both to top. What am i doing wrong? Code: <div class="" style="width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px;"> <div class="" style="position:relative; z-index:7; width:300px;"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </div> <div class="" style="position:relative; z-index:6; width:200px; left:320px;"><IMG src='test.jpg' width='125'></div> </div> Similar TutorialsCurrently I am building a not for profit food website. An aim of the site is using pure CSS positioning - no tables. The problem I have encountered relates to positioning two images side by with heading text below within a positioned DIV. The screen design can be seen here Note the Recipe box which contains the two images of Hummus and Roast Duck. Getting this into HTML and CSS is proving to be difficult. My efforts can be found here Within the containing DIV I have placed two DIVs to hold each image and eventually the text headers. Code: <div id="SplashContainerLeft"> <h3><a href="#">Recipes</a></h3> <div class="ContainerTest"> <img class="" src="images/recipes/homus.jpg" alt="homus"/> <!-- <p class="SplashImageTitleLeft">Homus</p> --> </div> <div class="ContainerTest" style=""> <img class="" src="images/recipes/roastduck.jpg" alt="roastduck"/> <!-- <p class="SplashImageTitleRight">Roast Duck</p> --> </div> </div> The CSS is as follows Code: #SplashContainerLeft {
border: 2px solid #DFDFFF;
margin-left: 30%;
width: 15%;
}
#SplashContainerLeft h3{
text-align: center;
text-transform: uppercase;
}
#SplashContainerLeft h3 a:hover{
text-decoration: none;
}
.ContainerTest {
border: 1px solid black; /*for testing */
width: 50%;
display: inline;
}
The problem is the width value is ignored when an element is inline. Otherwise this solution would work well. Having two container DIVs would enable the images and headers to be nicely aligned using margin: 0 auto (also not working on the pages at the mo, possible DTD problem) Does anyone have any suggestions? Thanks for anyones help and time in advance.. Even if you just read the post. BuR I have a page where I'm building a search function. I'm trying to make this little magnifying glass image I have line up with the input field, but it looks like it's offset to the top just a little bit. Here is my code: HTML Code:
<div class="search">
<form id="srch_box">
Search Terms: <br/>
<input type="text" id="search_txt" /> <img src="img/magnifier.jpg" alt="Search"/><br/>
Advanced Search >><br/>
<input type="button" class="submit" id="search" onclick="sendRequest();" value="Search"/>
</form>
</div>
CSS Code:
.login, .search {
padding: 0 10px 0 10px;
font-weight: bold;
vertical-align: bottom;
}
I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hello everyone, I'm working on this page http://jordanmeeter.com/photos/sets/ and I want to get the set description inline with the <h2>. I can just baaaaarely remember how to do it, but everything I'm trying doesn't work. Can someone help me out? Thanks, Jordan I'm having trouble getting the following to work im = image Code: im im <div id = "controlText">Variable Length Text</div> im im my style info Code:
#controlText{
position:inline;
text-align:center
width:200px
}
I know that once I turn the div into an inline element I throw away the width which is what my problem seems to be. What is happening is you click forward (these are calendar controls) one month and then the text is short and your mouse is now over the year forward button which you then accidently click. I want the div or whichever tag to alwasy have the same width no matter what the text. Is there any other way to get this to work than multiple floated divs? I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list. sth like #myId LI { display:inline-block; } #myId LI H2{ display:inline-block; } solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated! here the html <ul id='myId'> <li><h2><a htref=...>somewhere</a></h2></li> <li><h2><a htref=...>somewhere</a></h2></li> </ul> OK Found out a float:left in the li was missing The Problem: I want my logo (a gif image) to justify to the left but padding centers it. Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)? Please email me for urls to see exactly what I'm working with. Many thanks in advance! Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? I've found a number of great examples of how to do tabs with CSS (http://unraveled.com/projects/css_tabs/ being the one I'm working off of), but they all link to various other HTML pages. Does anyone know of a reasonably simple way to do them inline? (think www.johnkerry.com) I'm sure there's javascript involved, but does anyone know of a good resource on how to accomlish something like this? Hi there... Simply enough, I'd like to get my column widths (for the "menu" and "content" div's) appearing in IE5+ as they do in Firefox. URL: http://www.cbaa.org.au/3cfor_web/ejournal_header.html CSS: http://www.cbaa.org.au/3cfor_web/layout2.css I've tried this technique: http://glish.com/css/hacks.asp but I'm not sure what I'm doing wrong. Any help greatly appreciated. This is bugging me to death. I cannot get these to top elements to display inline. If anyone could take a look in firebug to see element and related css applied and tell me whats wrong. The page is: http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0 at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this. any ideas? I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label. I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>. Code:
<div id=secondline>
<span id=ed>
<b>Event Definition</b>:<br>
<textarea name=inject cols=45 rows=6></textarea>
</span>
<span id=after>
<b>After</b><br>
<select name=next size=8 multiple>
<option value=0>0
...
<option value=100>100
</select>
</span>
</div>
but, alas, it doesn't work like that. How can I get Code: <tr> <td>label<br>form_control</td> <td>label<br>form_control</td> </tr> behavior without using tables? Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean Got a quick question from a newbie. Thanks to a kind member, I've just been assisted in creating my first HTML5/CSS 3.0 page. It has a footer that extends vertically with content. I have several pages that will be updated that will be changed frequently. In my world of tables, I would simply create an inline frame to display them, and have ease of quick editing. The questions I have are 1) is there a CSS alternative to have mulitlple links display different content in a particular frame or div? 2) With either that alternative OR inline frames, is there a way to make it dynamic, meaning instead of scrolling, it extends downward and pushes the footer down as content grows? 3) if so, how would I accomplish this? What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. Please look at this site - http://www.hitechtranny.com In FF and IE7. Notice in FF that the last link "Contact" on the main nav does not fit? I use this navigation on numerous sites and I always get this problem. Is there a quick fix such as a margin/padding issue I am missing that would fix this? Thanks. Tom I need to create signature files for (Outlook) for my group. Until 2 days ago I knew nothing about css but I am learning. Coz Outlook only picks up the body from an html file I cannot use external css sheets, so all coding must be done inline. Only thing I can't figure out is the style for a weblink. Here's s snip of the relevant line: <a href="http://www.blabla.com.au" style="font: bold 8pt arial,sans-serif"> <span style="color:#ef812a; font-decoration: underline">www.blabla.com.au</span></a> The code (probably shabby) renders fine in Dreamweaver, but the sig in Outlook the underline shows blue - I want the underline for any link (visited, not visited) to show as #ef812a which is sort of orange. I can't figure out how to insert the a:link etc stuff. Thanks James |
|||||||