I have a big div which includes two divs. These smaller divs have to be in the same row, so I do it with "display:inline-block". But when the second div's text goes longer, that div goes to one row down. So, what I want to do is, making the second div some kind of fluid so it stays at the same row, and then rest of it goes down.
Here I have an example picture from Paint:
I'm looking for a solution with CSS or jQuery which I can handle easily.
Hope I could explain, thank you.
Give your #text div a style of float: left; and place it before the #secondText div in the source order. This will force your #secondText content to wrap around #text.
<div id="text">Text</div>
<div id="secondText">Another text continues here</div>
And the CSS:
#text { float: left; }
You can simply apply display:inline for both the inner divs as in this JSFiddle
Related
I want to aligh the div tags as mentioned in the link . I need to fit the whole div in a wrapper and it should be center of the page
div1
div2
div3
div4
div5
div6
DIV outline
First, you need the wrapper div element. Define it with a fixed width of 1000px or something that you like. To make the wrapper align center, just set the left and right margins of it to auto.
For the first free space inside that wrapper, you could set a padding-top to the wrapper element or a margin-top to the DIV1 element.
For the DIV3, DIV4, DIV5, you could enlcose them in another div. And set these three divs to float left. Make sure you set the width to these three divs. After these three divs, you need to use clear attribute so that the floats will be cleared.
This is one way, there is some other way too achieve the same.
Anyway, I give you some ideas. Now try it and show us your code. We will give you more suggestions upon seeing the code. :)
As it seems from the image you provided, the html will be like:
<div class='wrapper'>
<div>DIV1</div>
<div>DIV2</div>
<div class='inlineDivs'>DIV3</div>
<div class='inlineDivs'>DIV4</div>
<div class='inlineDivs'>DIV5</div>
<div>DIV6</div>
</div>
and required css will be:
.inlineDivs {
display: inline;
width: 33.3%;
text-align: center;
}
.wrapper {
width: 800px;
}
Adjust the width as required.
trying to learn some html/css and I'm having a problem with fixed position divs. I think if you check my jsfiddle you will immediately see what I'm doing wrong, but here's a breakdown to be specific:
I've got 2 fixed position divs, .menu and .menu-2. I'd like my .middle div to be underneath those, however at the moment its beneath that fixed position divs. Do I have any choice but to use absolute positioning? I'm going to eventually need to float a bunch of stuff inside my .left and .right divs.
I'd just like everything to begin after the fixed position divs. And lastly, my footer div also is underlapping and not being placed after my .middle div. Can someone explain where I'm going wrong here? Thanks!
http://jsfiddle.net/5MW7s/
Add clear: both; to footer.
Add margin-top: 120px !important; to .middle.
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>
I have run into a strange situation where I need to float two elements. The first is rather small around 250px. The second is large (800px), and creates horizontal scrollbars. I would like to float both of these elements so they are side-by-side, but the second gets pushed to its own line?
Is it possible to float two element side-by-side when they take up more than the page? I can't change the page size, or anything. I just want to know if this is possible and how.
Thanks
You could float a 250px and 800px div inside a 1050px wide box.
<div style="width:1050px;">
<div style="width:250px;float:left">left</div>
<div style="width:800px;float:left">right</div>
</div>
You want to add:
overflow-x: scroll;
white-space: nowrap;
To your wrapping div around those two elements.
And add:
display: inline-block;
To the div's to be overflowed.
JSFiddle
So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
One example of how I did it you can see on this website.
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
Example:
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
The answer to this question might help you:
Extending sidebar down page
you can use the css border-left on the right div.
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>