This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I've read quite a few links about the problem but i can't grasp why the following fiddle is the way it is. I maybe missed some point, so my apologies in advance. It hasn't really been my day.
Here you have this line break which i claim shouldn't be there, because both the external divs are styled "display: inline". Why are in the inner divs (set to style "display: block") affecting the line break?!
The way i see it, the external divs should be on one line and the line break should occur inside the second div. Also, the first div shouldn't be necessary, since img is inline by default.
Any explanation?
Put <div style="display: inline"> for the 1st div and it will work - http://jsfiddle.net/v7eUN/3/
It was <div style="inline"> - just a typo after a hard day, I guess?
You have mistyped the style for the main div, you need to use style="display: inline" not style="inline".
See here: http://jsfiddle.net/v7eUN/4/
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
When I use "overflow:auto;" it's creating a horizontal scroll bar!
look at http://slico.ca/design.php
Please help, this is killing me. I am trying to make a footer that will lower or rise as the content/subcategory divs are filled or emptied.
My question is what am I doing wrong? If I am not using proper things, please specify.
Make use of box-sizing CSS property and you don't need all those styles there.
I did not correct your CSS but here is a fixed version
box-sizing:border-box;
this will help treat border as part of width
http://jsfiddle.net/uBE5Y/
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
when i resize the browser, three elements in the middle (It's for everybody, It's one big community, its fun) position dont stay static. the third box goes under the other two boxes.
Here is the link,http://www.archimedus.com/archimedus/
I have been battling with this css issue for a day now.
It could be very simple but still i haven't been able to figure out what mistake i have made.
can someone please advise.
Start by checking your html marckup. You must use bottom_text classes instead of id's . You should not have duplicated id's in the document.
Then you must take a decision about what do you want to happen width your divs
Specific to your question
If the target is to avoid the relocation effect, wrap then in a container div and let them float inside of it. Then set a minimum width to your wraper div. Decide how will behave the overflow of it.
Your floting divs can use relative margins in order to obtain some flexible layout, etc...
The simplest way to fix this would be to give the boxes a max width of 33%.
#content_mass_bottom #bottom_text {
float: left;
width: 425px;
max-width: 33%;
}
You can move your bottom_text divs into the tbox1/2/3 divs.
<div id="tbox1">
<img src="/archimedus/images/everybody.png" class="everybody">
<div id="bottom_text">
<p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
</div>
</div>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I need to make a textarea and a div look exactly the same in all browsers.
I have this code: http://jsfiddle.net/eric777/XHtY9/
How can I achieve that?
First, I believe that forcing something to look exactly the same in all browsers is an approach that is about to die out. It is much easier to embrace the differences and let inputs etc. vary slightly in style between browsers. Very few visitors will visit your site will multiple browsers anyway, so very few will even notice the difference.
Now on to answer your actual question. Since you haven't specified what the textarea/div should look like, I cannot provide you with a complete set of properties, but here is an approach to how to achieve it.
Use a CSS-reset, like this one (there are others as well), to get rid of the default styling applied by each browser. Now the page start of with the same look in all browsers.
Apply your desired styling on both the div and the textarea.
A textarea will scroll by default when the content does not fit. You might have to fake that for the div element using overflow-y: scroll;.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
If you take a look at this link you'll see text in the second slide. This text is purposely very (for testing purposes) long but only a very small part of it is being displayed in the <p> tag.
If you look at the source, you'll notice that the entire text is indeed there but for some reason only a part is being rendered.
Any ideas?
the containing <li> and <ul> elements have a height specified and overflow is set to hidden
Press F12 in Internet Explorer 9 or Chrome to see the applied CSS
Because you are using a carousel plugin, this will slide the text in from the right.
The element will have a parent container that will have overflow:hidden CSS attribute; therefore until the carousel plugin alters the inner positions, it won't be displayed.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
I'm working on a project and I'm attempting to style a specific link type in the same way as Adi Palaz uses here to define external links. I have my code set up the same as his but for some reason display: inline-block is overflowing the containing <li> element (which has a defined width) so that the list elements stack 2 side-by-side.
Can someone tell me how to go about forcing the link "The Mountain and the Mole Hill" at bottom of this demo, development page (http://dreamstarstudios.net/sandbox/philosimply/sliding_drawer.html) to break lines? I thought inline-block was expressly for the purpose of have text that is displayed as a block level element yet still breaks lines. The even stranger thing is that changing it to display: inline doesn't force a line break but rather just causes the text to overflow the defined width :(
EDIT My apologies for not explaining further. If you look at this link (http://www.adipalaz.com/linksbg.html) you will see how this developer used white-space: nowrap (which is needed) to achieve the desired effect I'm going for. What I really need to know is why it is working for him but not me.
Just remove white-space:nowrap;
http://www.w3schools.com/cssref/pr_text_white-space.asp
in your style sheet 'line 206' you are setting the width, it is doing exactly what you are telling it to do, you will need to make it wider or add clear: both; to the li.
You've set white-space:nowrap on this link. That's why it won't break.