I have created a page which has a container of 350px.
Now I have two sections, one on the left and the other on the right side.
Left content is fixed, whereas the right content is flexible to contain more text.
I have used float:left and float right for left and right positioning. And to get more text I use the word-wrap:break-word.
However, I have to use a div to include the clear class after every point.
Is there a smarter way to do this?
[EDIT] : I know this can be done using the <li> or <table> but I wanted to know if there was a way to get this structure using the div structure itself.
This makes my question easier to understand : http://jsfiddle.net/tKHkS/1/
You don't need the clearer div's
Just clear:both on the left questions.
Like this: http://jsfiddle.net/3H6Ue/
Related
I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.
The title says pretty much everything. I have a wrapper div with two divs floated side by side in it. The contents and its length in both divs varies. The problem is, that I need the wrapper div to stretch only with the right div. The left div should have scrollbar, if its length exceeds the length of the right div.
One person in IRC already claimed it's impossible to do, but I refuse to believe him. CSS3 and/or HTML5 are completely acceptable since the whole site is wrote with them already.
Thanks in advance, if someone knows an answer.
Here is a fiddle I made which should accomplish what you're asking for:
http://jsfiddle.net/zftXu/1/
Just keep in mind that since the size of the right div is dynamic, if its contents become too large (off the screen), the right div will move to a row below it. If you wish to prevent this, then put an overflow and max width on the wrapper, like this:
http://jsfiddle.net/zftXu/3/
all! I thank you for your time and attention today : ). I currently use Dreamweaver and do some design work, however I have been unable to find an answer to this question. I'm happy to pursue any knowledge necessary to accomplish this (such as learning php or javascript, etc.)... Here's is my problem... I want to make a webpage have this type of layout - (this would be a homepage, broken into components in three columns (there would be a header above, that I left out of the illustration because that would be full width of website and not produce a problem, I don't think)... the left is full height. the center would have three rows and the right would have three rows - offset from the center column) -
http://i.stack.imgur.com/KkEiR.jpg
I can place a div as a wrapper around the entire thing (as I normally need to do when making a three column wide section), and using css... float the left column, left. Add a left margin to the center one (whatever the width of the left div is). And float the right one, right... However, while that does allow me to have three columns across, I cannot have the multiple rows downward in the center, or right column (because it outputs at the height of the largest column for the wrap). In these smaller sections I would like to use some php scripts (I have a php news script and a shoutbox script), so it's not like it's a static picture or text that I could carefully slice, making numerous div wraps and divs within them down the page...
In my research I've seen things such as php includes and requires (I'm not sure if that would allow for the multiple rows in the center and right colums though), I just know it can be used to insert a php script or document into a div. I've also read that isn't the best practice and that Ajax/jquery should be considered for better security. However, I'm still not sure if either of those would allow me to create this layout. I'm sure that joomla or drupal or any number of other CMS probably allow for this, but I want to know the "hands on" way to do it (I've always found that makes configuration, troubleshooting and design much easier and much better quality down the line).
I respectfully ask that answers stay on topic as much as possible, without questions such as, why do you normally do or use this? etc... I would greatly appreciate constructive information on what I CAN do to accomplish this : D... I thank you all again for your time and attention!
Ok, I've found at least one way to accomplish this : D... I still use Divs within Divs (floating them left or right) and placing them within wraps (that can also be floated left and right) to get as many Divs across as I need. Then when I need multiple vertical Divs, I simply create a new *.php file with all the vertical Divs I need, and use the php include_once line to call that *.php file (and all of it's vertical Divs) into the Div on the original page, voila!
My first page (in shorthand) may look something like this -
<div id="content_wrap">
<div id="a"></div> (floated left in css)
<div id="b">
<?php include_once ('vertical_divs.php'); ?>
</div> (floated left with lefthand margin in css)
<div id="c"></div> (floated right in css)
</div>
My vertical_divs.php may look like this -
<div id="vert_a"></div>
<div id="vert_b"></div>
<div id="vert_c"></div>
<div id="vert_d"></div>
<div id="vert_e"></div>
Again, this would pull all of those vertical Divs into Div "B", allowing that column to have multiple vertical Divs without interfering with the Divs to it's left or right.
So i have my header setup fine. Then i have my body. What i want to happen is to have the body split (did that fine, no problem). then on the left side i have my navigation and the right side i have my main body content. My problem is if i use a float for the initial split how do i split the right side in half then? I want 3 sections overall. Left side, then leftRight and rightRight.
My question is, can i put a float inside something this is already floating? If so, then how? if not, then how can i split the right side of my body again?
Here is what i tried: http://people.eecs.ku.edu/~ageoffri/unavitSite/
Yes, you can put floating elements inside other floating elements.
As you discovered, your code has a misplaced div, so you aren't actually nesting your elements.
I need two divs side by side with the one on the right always stretched to 100%. The one on the left is not always going to be there and contains an image of 128px width & height. Inside the div on the right is a table that is 100% width. Can this be done? Does anyone know how to do this?
Here is a jsfiddle that (I think) solves your problem. Next time some code would be helpful so we have a place to start.
The trick is to use absolute positioning in the div on the right side to make it "stretch." Note that the parent cannot have static positioning.
EDIT: If the image is not always there, you might need some logic when using this technique. Remove/add a class in JavaScript or something to make .child2 have left: 0px;. Not sure what technologies you're using.
EDIT2: Here is a link to an article that discusses the technique, as well as other situations where it's useful.