Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to solve this problem in Internet Explorer 8.
I have two div tags whose content should be shown on the same line. I know I can easily achieve this by using inline-block. However, I also want that, if the browser window is reduced to the point where the content doesn't fit in a line anymore, the content of the second div is moved on the line below.
Basically I'm looking for a behaviour of the kind "show both items on the same line if there is enough space, otherwise go to the next one".
Is there any way to achieve this with IE8? Even a Javascript solution is fine.
Try using style="float:left" on both divs. You may need to wrap both of them in another div to get the effect you're looking for.
You can use a media query to check the width of the screen and change the styling based on that:
#media(min-width:768px) { //div style here }
Check it out here:
http://jsfiddle.net/b9ahqnt0/
as well as float left try adding a percentage as a width so when the size of the screen is reduced it can adjust. Although normally when it comes to responsive sites you are better setting it up then adjust the issues as Daniel said using #media conditions to change the layout as the screen changes to what you need it to look like..
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
So I'm trying to create a login page, and it's starting to look good, but when I resized the window, the "[] Remember me" field jumped out of the div:
I want it to always stay like this:
I've made a demo of this login page here: Jfiddle DEMO
IMPORTANT: The width in the example has been set to 10% just to show what I mean, inside the class .div_center. Remove this to get normal responsive size.
In your .div_center you have provided a height of 370px. But due to the margin incmoing from top, your checkbox is being pushed outside the box.
Here's a tweak, just set height to fit-content, and the box would always keep hold of it's contents.
Maybe you can use clamp in font-size,
ex: font-size: clamp(1rem, 2.5vw, 2rem);
Go through the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
or you try to do with media query
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
According to the inspect elements menu, this thing called <tbody> exists, and <tr> is inside it. The problem is, tbody, is 100% height and width, which it should be, but <tr> is always 4 pixels less in height than it should be, even when styled at 100% height
THEN
inside there are two tds, one has 20% and one has 80% width, but they both have these annoying border type things, that i cant get rid of, it looks like margin but honestly cannot find anything
This question is a bit of a mess, but i cant find any sort of solution
I would suggest looking at the padding around "tr". A great tool to use is Pesticide (it's a Google Chrome extension) that when it turns on, it will show the outlines of different sections to help you determine what is being controlled in terms of padding/margin. It sounds like there may be a padding issue. If you turn on Chrome Developer, under the Element tab on the right side, if you scroll all the way down, you can see the box model and see the padding/margin that is used in the respective section.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For a school deliverable I need to make a horizontal bar graph with a description for each bar. This is the first HTML/CSS thing I'm making after completing the codecadamy courses. I've been able to figure out everything so far by looking at stuff on codepen, w3schools, stackoverflow, etc. But this last part is kicking my ass and I can't figure it out.
I have two lay-outs:
the graph and description next to each other for screens wider than 1240px,
the graph and description under each other for narrower screens
I did this by making two columns in Bootstrap and giving the container two fixed sizes. This works great on screens wider than 992 pixels, but on screens smaller than this the links don't work anymore. Some detective work with the Chrome Developer Tools shows that this coincides with a float:left that's enabled by #media (min-width:992px) in the bootstrap.css. Disabling the float on wider screens breaks the links again, but enabling it narrow screens doesn't fix them, so I'm not sure how that relates.
Here's the page: http://tijmen.kervers.nl/B1.2/competencies.html
And I think these are the questions I need to ask:
Why do the links only work when float:left is enabled?
If I failed to provide necessary information please let me know, thanks in advance!
Add a clearfix on your first #bars with Bootstrap's class clearfix, and it's clickable again.
To understand this :
Without clearfix, your block #bars has no height, and the second .col-md-6 overlaps it. The links are thus unclickable :
With clearfix, your block #bars clears the float of the second col, and has its height defined by its content. Thus, its content is brought back to front, and clickable :
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a quick question about CSS positioning. I have already looked up all about absolute, relative, static etc but am still having problems. So, for example, on one of my webpages, I am using four different div's for the four seperate sections I have on the page. I can manage to position them so they look perfect, but the top left section expands as the user adds entrys. When it expands, it then overlaps the section below it. Same with the other side, the section expands a little if it needs to display error messages and overlaps the section below it. Any suggestions as to how I would overcome this?
Thank you !!
If you want divs to flow normally on a page, you don't have to use positioning. Generally, if you are using positioning, you use it for a div that you want to have in a specific place that would in a normal situation, be somewhere else. For example: you would position something relatively if you wanted it to actually escape the container it is in. You would position something absolutely if you want it to be in exactly the same place, no matter what (this includes scrolling) OR if you want to overlap divs using a z-index.
Usually, if you just want divs to line up side by side, you can display: inline or use float.