I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%
Example
you can position them absolutely:
#box1,#box2 {
position: absolute;
width: 50%;
}
#box1 {
left: 0;
}
#box2 {
right: 0;
}
This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...
.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }
Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.
Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
I'm stuck with adjusting the height of my block in relation to the amount of text inside it. On desktops it works fine, but on my iPhone the text goes over the div with the violet background.
Life demo: https://www.ruslanchik.ru/en/. To reproduce the problem, you may use your mobile device.
.section-with-personal-photo {
width: 100%;
height: 100%;
min-height: 360px;
background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}
.section-with-personal-photo-image {
padding: 0;
display: block;
float: left;
clear: left;
content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}
.section-with-personal-photo-text {
height: 100%;
max-width: 68%;
float: right;
color: #ffffff
}
<div class=section-with-personal-photo>
<div class=section-with-personal-photo-image></div>
<div class=section-with-personal-photo-text>
<h3 id=resume>CV</h3>
<p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
<ul class=dotted-list>
<li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
<li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
</ul>
<p id=make-an-offer>Let me know about some opportunities available at your organisation:
<ul class=dotted-list>
<li>ruslanchik#ruslanchik.ru</li>
<li>ruslan.seletskiy#gmail.com <span> if you think my domain email is unprofessional</span></li>
</ul>
</div>
</div>
I've checked various posts on Stackoverflow, but solutions from many of them didn't work. For all the rest, solutions (e.g. how do I give a div a responsive height) made the layout even worse.
Any relevant help is highly appreciated.
You can also remove float and max-width from your 'section-with-personal-photo-text' class.
Then add 32% padding to your 'section-with-personal-photo'. This results in the div expanding like so:
note (the image you have doesn't appear because the cloudinary domain is blocked on my network for some reason but, it should still work)
That's good you posted the live example, this issue is also replicated with Chrome browser, so I tried it and I found a solution but I recommend you to adjust font-size for small devices too, but anyway look at it and consider if it's okay for you:
1) Set the overflow: auto to this element:
#section-with-personal-photo
2) Set the width: 32% to this element:
#section-with-personal-photo-image
When you are the view, you can see that the parent element is growing up and all content isn't overflowing.
But also there is a better solution for this case, but I hope this helps you to figure out this overflow issue.
Try setting height: auto; not height:100%:.
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
I am learning HTML / CSS basics and I am stuck at the following problem.
I would like to put 3 fixed-size float divs in a fixed-width outside div, and I would only like to have margins between them, not outside them.
My problem is that I don't know how to achieve this. I tried reading about margin-collapse and negative margins but it is quite hard for me to understand.
I have put my example onto the following jsfiddle: http://jsfiddle.net/6dqR6/
HTML
<div class="outer">
<div class="articles">
<h2>header</h2>
<div class="article">
<p>1</p>
</div>
<div class="article">
<p>2</p>
</div>
<div class="article">
<p>3</p>
</div>
<div class="article">
<p>4</p>
</div>
<div class="article">
<p>5</p>
</div>
<div class="article">
<p>6</p>
</div>
</div>
</div>
CSS
.outer {
width: 940px;
margin: 0 auto;
}
.articles {
height: 1500px;
background-color: #fcdda1;
}
.article {
width: 300px;
height: 350px;
float: left;
background-color: #4ecac3;
margin: 0 20px 20px 0;
}
Can you tell me:
What is the recommended way to solve my problem and fix the above example?
Possibly some beginner friendly articles/books from which I could learn about it?
Thanks a lot, and sorry for asking such a beginner level question here.
1) Solution for a basic CSS knowledge
Based on Css2, fully cross-browser
Here is the solution to have only the inner margin, and not applied to the last on the right, click here, the working fiddle.
You have to make a mask to overflow the plus margin:
.outer {
width: 940px;
overflow:hidden;
/*behaves like a mask*/
}
.articles {
width: 960px; /*set the actual width: 320*3*/
}
2) Advanced solution
Based on Css3, only modern browser (except, of course, IE)
The Css nth-child solution is here in this example: jsfiddle.net:
.articles > :nth-child(3n+1) { margin-right: 0; }
You can find here the complete explanation about how it works.
Since IE have a partial support of Css3 upcoming standards, you can use IE conditional Comments to pass specific Css on for InternetExplorer legacy versions (e.g. Css3 Solution for modern browsers, Css2 solution only for old IEs).
Eventually, here are other solutions based on Css pseudoclass and jQuery.
3) Online resources to make practice on CSS
Here is where you can learn a lot about Css in general:
CssTricks
Smashing Magazine
Tuts Plus: CSS categories
This can be thought as "advanced", but I think is the best way, just add to your CSS:
.article:nth-child(3n-3) {
margin-right:0
}
This makes every third element not having right margin, so it wont fall to the next line. That's it.
Beside CssTricks, Mozilla Developer Network is a good resource to learn too.
I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
Changing the display of the h1 to table-caption is close to what you want, in Google Chrome. But it's not perfect and I can't really recommend that as a solution wholeheartedly, mainly due to not testing it in any other browsers.
Not sure if browser behavior has changed since the earlier 'table-caption' answer was posted, but it does not currently work (using Chromium 41):
In reality, it seems the desired behavior is not possible with pure CSS (as of 2015). Further explanation and a lightweight Javascript workaround are available in another SO question: max-width adjusts to fit text?