Before marking [duplicated] make sure to understand the question.
I'm having trouble to find out the best way to have 2 divs side by side where the first one is dynamic to it's content which can be added and removed. Checking the actual code explains it way more than me. It's basically an editor where there's the lines counter and the code/text part.
JSFiddle and code snippet:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
display: inline-block;
height: 100%;
padding: 0 7px;
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
display: inline-block;
height: 100%;
vertical-align: top;
width: calc(100% - 34px);
}
<div id="editor">
<div id="lines">
<span>1</span>
<br><span>2</span>
<br><span>10</span>
<br><span>etc</span>
</div><div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
Right now I'm using width: calc(100% - 34px); which does not fix the problem of when I add/remove line numbers that make its div change width.
I have tried multiple values in the CSS property display. I suspect something related with tables would work but I would prefer a not workaround and no JavaScript if possible.
If you haven't understood the issue, just remove the 10 and the etc and you will notice a white space in the end of the editor/text div.
You can use flexboxes:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
display: flex; /* add */
}
#lines {
background-color: #2e3436;
color: #fff;
/*display: inline-block;*/
height: 100%;
padding: 0 7px;
}
#lines span {
display: block; /*add and remove <br>s*/
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
/*display: inline-block;*/
height: 100%;
/*vertical-align: top;*/
width: 100%;
}
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etc</span>
</div><div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
float instead of inline-block
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
/*display: inline-block; nooooo */
float:left; /* yeeeeees */
height: 100%;
padding: 0 7px;
text-align: right; /* missing this :) */
}
#lines span{ display: block;} /* yeeeeyyy */
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
/*display: inline-block; noooooo */
/* width: calc(100% - 34px); noooooo */
height: 100%;
vertical-align: top;
}
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etccccc</span>
</div>
<div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
ive did myself using float for lines (to not use br's)
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etc</span>
</div>
<div id="text">
<span><html></span>
<span>// Code</span>
<span></html></span>
</div>
</div>
and display table properties to fit with all screen and get better alignments.
heres the example, works fine to me: https://jsfiddle.net/wkd0ssw3/
this will work in any navigator, be careful to use another properties like display:flex or calc, because may not work in all navigators...
Put the .editor element inside the .text element, make it a floated block and give the .textelement 100% width:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
float: left;
display: block;
height: 100%;
padding: 0 7px;
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
display: inline-block;
height: 100%;
vertical-align: top;
width: 100%;
}
<div id="editor">
<div id="text">
<div id="lines">
<span>1</span>
<br><span>2</span>
<br><span>10000</span>
<br><span>etc</span>
</div>
<span><html><br>// Code<br></html></span>
</div>
</div>
Related
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I have this code and I want the css code with a max-width: 780px, the .second in a line alone because it is the logo, and the .first and .third on the line below. I don't know how to do it.
Normally, this elements are Ordered in one line with a wider width than 780px. The normal order: first, second, third
The order I want with a max-width: 780px:
.................second..............
........first........|.......third......
<header>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</header>
header {
background: #FFF;
width: 100%;
height: 160px;
}
.SearchBar {
width: 30%;
height: 130px;
display: inline-block;
float: left;
text-align: center;
}
.SearchBar:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.SearchBar>p {
padding-right: 0;
padding-left: 0;
display: inline-block;
}
.SearchBar>p>input {
background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
background-position: 90% 50%;
width: 230px;
height: 50px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 18px;
}
.SearchBar>p>input:enabled {
cursor: text;
}
.logo {
width: 40%;
height: 130px;
display: inline-block;
margin: auto;
text-align: center;
}
.logo:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.logo a {
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
}
.shoppingcar {
width: 30%;
height: 130px;
display: inline-block;
float: right;
text-align: center;
}
.shoppingcar:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.cartletter {
padding-right: 0;
padding-left: 0;
display: inline-block;
font-family: FuturaLight;
}
<header>
<div class="subheader"></div>
<div class="SearchBar">
<a> FIRST</a>
</div>
<div class="logo">
<a> SECOND</a>
</div>
<div class="shoppingcar">
<p class="cartletter">
<a> THIRD</a>
</p>
</div>
</header>
hmm, well since there's no css code and jsfiddle, I'm assuming this can do the trick ? try it on and let me know please ?
#media all and (max-width: 780px) {
.second {
display:inline-block;
}
.first {
display:inline;
float:left;
}
.third {
display:inline;
float:right;
}
}
I have a user name and photograph that appears side by side and middle aligned, as shown below.
I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right.
I have tried adding float: right and float left to the css but this only makes the photograph appear under the user name.
I have read several similar threads and tried many things, but I cannot solve this. It is really frustrating. It may be a simple fix, but I cannot see it.
Using CSS, how do I display the username on the right and the photo on the left and still have the user name and photo vertical-align: middle with a width of 100%? The photo that the user uploads can be different height, so I cannot use line-height.
Here is my HTML code:
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
</div>
</div>
</div>
</div>
Here is my css code:
.resumeStyleResumeTitleWrapper17 {
display: table-cell;
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
padding: 2px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
max-width: 149px;
padding: 2px;
text-align: right;
vertical-align: middle;
}
.resumeStyleResumeTitlePhotographInner17 {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Here is one way of doing it using CSS3 transforms to take care of the vertical alignment of the name/title element.
I defined two classes, .flipLeft and .flipRight to control the placement of the name/title and the image elements.
I assumed that the image height will be as tall or taller than the height of the name/title, otherwise, things get more complicated.
The trick is to use the text-align property to place the image to the left or to the right of the parent block.
I then use absolute positioning to take the name/title element out of the content flow and pin it to the opposite edge of the parent block and adjust the top offset to 50% to get approximate vertical centering.
Finally, I use CSS3 transforms to adjust for the height of the name/title element.
Note: In the snippet below, scroll vertically to see both examples.
.resumeStyleResumeTitleWrapper17 {
display: block;
width: auto;
border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
position: relative;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
border: 1px dotted yellow;
display: inline-block;
vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<h2>Flip Image to Left</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipLeft">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipRight">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
Couldn't achieve it with float but I got the desired layout using display: flex;
JS Fiddle
div.container {
display: flex;
width: 100%;
align-items: center;
background-color: black;
height: 100px;
padding: 20px 0;
}
div.user_name {
display: flex;
font-size: 32px;
font-family: Helvetica;
color: white;
width: 50%;
padding-left: 20px;
}
div.user_img {
display: flex;
justify-content: flex-end;
width: 50%;
height: 100%;
padding-right: 20px;
}
div.user_img > img {
height: 100%!important;
width: auto;
}
<div class="container">
<div class="user_name">User Name</div>
<div class="user_img">
<img src="http://www.lessons4living.com/images/penclchk.gif"/>
</div>
</div>
Found a fix for this problem, update your HTML to following,
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
</div>
</div>
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
</div>
</div>
In CSS,
.resumeStyleResumeTitleWrapper17 {
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
float: left;
text-align: left;
width: 100%;
height: 150px;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
padding: 2px;
text-align: left;
display: inline-block;
vertical-align: middle;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: middle;
display: inline-block;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
.resumeStyleResumeTitle17:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -2px;
}
Basically I added a .resumeStyleResumeTitle17:before element which acts like a ghost element and takes the full height and allows each adjacent elements to be aligned by display:inline-block and now vertical-align:middle property is applicable.
Ok, this is to point you in the right direction, but it is obvious that you don't really understand what is going on. You have way too many div's there and really bad naming structure on the classes. Here is how I got it working somewhat in the direction you want without removing the divs and starting over (which is what I would do otherwise): ( Here is the live jsfiddle for it).
<!DOCTYPE HTML>
<style>
.resumeStyleResumeTitleWrapper17 {
position:relative;
width: 100%;
display:block;
background-color: #000;
height:175px;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
float:right;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
float:right;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
}
.resumeStyleResumeTitlePhotographInner17 {
float:left;
height:175px;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<span class="resumeStyleResumeTitleFontChange17">User Name</span>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
<img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
</div>
</div>
</div>
</html>