Hi! I am trying to place two paragraphs inside a DIV (a Name and a Job Position) for a responsive site.
.header {
min-height: 56px;
transition: min-height 0.3s;
max-width: 800px;
}
.header__inner {
margin-left: auto;
margin-right: auto;
float: left;
border: 3px solid #73AD21;
display: inline;
}
.header__text {
float: right;
border: 3px solid #73AD21;
display: inline;
}
<header class="header">
<div class="header">
<div class="header__inner">
<img class="header__logo" src="logo.jpg" alt="Logo">
</div>
<div class="header__text">
<p class="header__title">
NAME
</p>
<p class="header__subtitle">
CURRENT POSITION
</p>
</div>
</div>
</header>
Whenever I start playing with different sizes of screen both paragraphs switch places randomly. How can I make sure that they will stay in order?
This is how the page looks
Page with misplaced texts
And this is what I would like to accomplish
what I want to do
It seems you didn't post the CSS for the two elements whose position you want to switch, header__title and header__subtitle. But apparently they are both floated right. To make sure header__subtitle is NOT displayed to the left of header__title even if there is enough space, you can add this:
.header__subtitle {
clear: right;
}
Related
I'm trying to set up a nav bar with a png link to the top left corner, and a text element "menu" to the top right corner. I haven't been able to get this to work with "float: right;"
I've included the code that shows I used float: right; for the .topnav elements. I'm not sure if .logo is interfering with this. I needed the png logo to be aligned with the text element which was not possible without putting them in separate divs.
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
float: right;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}
.topnav_right {
float: right;
}
.logo {
float: left;
}
<div class="container">
<div class="logo">
<img src="####.png" style="max-width:100%;">
</div>
<div class="topnav">
<div class="topnav_right">
Menu
</div>
</div>
</div>
The text still remain next to the logo, when it should be in the opposite corner to the right.
In the container class, instead of having position: absolute , do position: flex . It will fix the problem.
Since you want a Navbar with left-aligned png-link and right-aligned text, it can be achieved in a much simpler way using flex-box, with the need of nesting them.
It also handles alignment easily
You can read more about flexbox from csstricks
<style>
.topnav {
display:flex;
justify-content:space-between;
align-items:center;
}
</style>
<div class="topnav">
<div class="logo">
<img src="###.png">
</div>
<div class="text">
Menu
</div>
</div>
I am having trouble and need assistance. Essentially, I want a center image div and four divs around the center image with text. Also, when I collapse the page width, I want them to all float centered below one another. Imagine a smartphone image in the middle of the screen and four text blocks (two top and two bottom). Additionally (to complicate things, ha) I want the left top and bottom text blocks to have right aligned text and the right top and bottom text blocks to have left aligned text. When the page collapses, I want all text to be centered. Thank you very much for any assistance!
The problem I have with my existing code: I cannot move the text blocks exactly where I want. I don't want them specifically at the top and bottom. Also, I am having trouble with aligning the text properly.
This is what I have so far:
#solutions2Header {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
font-size: 40px;
font-weight: lighter;
letter-spacing: 2px;
}
.solutionSection2:after { /*clear float*/
content: "";
display: table;
clear: both;
margin: 0 auto;
}
.solutionSection2 > div {
float: left;
width: 33%;
box-sizing: border-box;
text-align: center;
background-color: red;
}
#media (max-width: 850px) { /*breakpoint*/
.solutionSection2 > div {
float: none;
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: #FAFAFA;
text-align: center;
}
}
.solutions2 {
background-color: green;
height: 100%;
padding-bottom: 500px;
}
#iphonexCenter {
position: relative;
margin: 0 auto;
}
#bottomBox {
padding-bottom: 100px;
}
<div class="solutions2">
<h2 id="solutions2Header">Highlighted Features</h2>
<div class="solutionSection2">
<div>
<p>Charges stored in one <br>place.</p>
<p><br>Provides peace of mind by<br>syncing and storing your charges<br>automatically.</p>
</div>
<div>
<img src="http://via.placeholder.com/300x600" id="iphonexCenter" alt="iPhone X Image" height="600" width="300" style="margin: 0 auto">
</div>
<div>
<p>Individual and team<br>messaging.</p>
<p><br>100% HIPAA compliant text<br>messaging at the tip of your fingers.</p>
</div>
</div>
<div class="solutionSection2">
<div id="bottomBox">
<p>Track daily work<br>progress.</p>
<p><br>Intellegently helps locate<br>missing charges and provides a score<br>card to ensure all charges are entered.</p>
</div>
<div>
<p></p>
</div>
<div id="bottomBox">
<p>Care coordination<br>alerts.</p>
<p><br>Be in the know. We can alert <br>your providers via admit/discharge
<br> notifications, stat, routine consults,<br> and more.</p>
</div>
</div>
</div>
If you don't need support for old browser I would go with flex box. It's quite easy. You can find complete guide to it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I've been trying to achieve this for hours and I'm not quite getting it to work, so here it goes nothing:
I have this site:Site HomePage
composed by this HTML elements:
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="midcontentwrap">
<div id="leftwrap">
<div id="left">
</div>
</div>
<div id="midwrap">
<div id="midleft">
</div>
<div id="midright">
</div>
</div>
<div id="rightwrap">
<div id="right">
</div>
</div>
</div>
</div>
What I need is:
- When the browser window is resized, either left and right columns stay where they are and the MID COLUMN RIGHT SIDE needs to go below MID COLUMN LEFT SIDE.
My CSS file is pretty simple by now and this is the only major thing I need to do as the window size changes.
Thanks in advance for any help.
Yep, you're going to want to use media queries. Here's a JSFiddle of it in action.
Resize the display iFrame of the Fiddle back and forth past 500px width to view the results. I spruced up your HTML a little, too, to make it more modern (sorry):
HTML:
<section class='contentWrap'>
<aside>
This element corresponds to the element on the far left of the image you linked to.
</aside>
<div class='mainContent'>
<article class='left'>
This element corresponds to the mid-left element in the image you linked to.
</article>
<article class='right'>
This element corresponds to the mid-right element in the image you linked to.
</article>
</div>
<nav>
This element corresponds to the element on the far right side of the image you linked to.
</nav>
</section>
CSS:
.contentWrap {
width: 100%;
}
.contentWrap aside {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid purple;
}
.mainContent {
display: inline-block;
width: 45%; /* only because the borders are upsetting the percantages */
height: 200px;
border: 1px solid gray;
vertical-align: top;
}
.mainContent article {
border: 1px solid #00cae9;
margin-bottom: 2px;
}
.contentWrap nav {
display: inline-block;
width: 25%;
height: 200px;
border: 1px solid orangered;
vertical-align: top;
}
#media screen and (min-width: 500px) {
.contentWrap {
width: 500px;
margin: 0 auto;
}
.mainContent article {
display: inline-block;
width: 47%;
vertical-align: top;
}
}
NB: if you're viewing it on a super small screen, it won't work; that's JSFiddle's problem.
Oh fun, an excuse to have a play with CSS Media Queries!
DEMO: http://jsfiddle.net/Vn2QY/1/
CSS
#midcontentwrap {
min-width: 500px;
}
#leftwrap, #midwrap, #rightwrap {
float: left;
min-height: 400px;
}
#leftwrap, #rightwrap {
min-width: 100px;
width: 25%;
background-color: #15a;
}
#midwrap {
width: 50%;
background-color: #45a
}
#midleft, #midright {
width: 50%;
float: left;
}
#midleft {
background-color: #a45;
}
#midright {
background-color: #4a5;
}
#media all and (max-width: 500px) {
#midleft, #midright {
width: 100%;
}
}
The key piece here is the final part of the CSS. It basically states that "for all media (screen, printing, etc) when the browser width is less than 500 pixels in width, change the styling for #midleft and #midright and make them 100% of the available width."
By increasing their widths their existing float styling will force them on to new lines.
Try this DEMO
I'm guessing your want to get a fluid/responsive design. This should work for you.
Use float:left and min-width
To solve this problem....use % value for all div id width
I am aiming for a setup similar to this:
Unfortunately I end up with this:
Here are my specs:
I'm trying to get divs with an image to be set up without borders, and divs with text to have a 1 px border.
Here are the divs I set up:
<section id="row2">
<div id="textBox1" class="column left">
<p> TEXT BOX 1 </p>
</div> <!--#textBox1 .column.left-->
<div class="column right">
<img src="assets/top-right-image.png"/>
</div>
</section> <!--#row2-->
<section id="row3">
<div class="column left"><img src="assets/bottom-left-image.png"/></div>
<div id="textBox2" class="column right">
<p> TEXT BOX 2 </p>
</div>
</section> <!--#row3-->
As you can see, I set up the text divs with an id "textBox1" and "textBox2". Unfortunately, this blows them up and makes the div.column.left in #row3 to align to the right.
here is the CSS:
.column {
float: left;
position: relative;
margin: 20px 11px;
}
.left {
width: 408px;
}
.right {
width: 449px;
}
#bannerPic {
padding: 0px 15px;
}
#row2 div {
height: 352px;
}
#row3 div {
height: 598px;
}
#textBox1 {
border: 1px solid #BCBCBC;
margin-bottom: 20px;
}
#textBox2 {
border: 1px solid #BCBCBC;
}
Where am I going wrong?
Chances are the top two items are not the exact same height, so the 3rd item, the taller photo, is "hanging" on the first. This happens because of the way float behavior works. Make sure the parts of each row (the divs) are rendered to the exact same height, including all borders, margin, padding, etc.
The other option is to "clear" the section tags. Since part of your content is text, this may be a lot easier. It's probably easier anyway. :)
section { clear: both }
Try adding a style cascade for:
section {
clear: both;
}
to clear out the floats and reset each row to the margin.