how to make the following div class in the same line

[piano0011]

Hey guys!

I am trying to make certain information bold and have created a div class for those elements, named information but it is displayed on the next line, instead of at the end of the same line: Here is my php and css code:

echo '<div class="update_text">';
                                 echo 'Your premium membership subscription plan A is: <div class="information">'.$row['subscriptionplan'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership date of subscription for subscription plan A is: <div class="information"> '.$row['subscriptionplandate'].'</div>';

CSS code:

div.information {

  font-size: 16px;
  font-weight: bold;
}

[piano0011]

I can get it to work by doing this but I thought it would be possible to do this in CSS

 echo '<br></br>';
                                 echo '<div class="update_text">';
                                 echo 'Your premium membership subscription plan A is: <b>'.$row['subscriptionplan'].'</b>';

 

[requinix]

DIVs not doing a good job of hammering in those screws, huh? Wherever you learned to throw DIVs at your problems, forget it and never go back again.

You want bold? Use a <b> or <strong>. It's not the best markup to be sure, but where you are now you should focus on learning one step at a time.

[maxxd]

There's an intrinsic difference between divs and spans. Divs don't display inline unless specifically told to do so, while spans do. So in a case such as this, you'd use a span element instead of div. In this specific case, you'd listen to requinix and use a strong tag as it's semantically and structurally correct.

[piano0011]

thanks and I got it to work using the span element but just wondering how i can get it to work with div?

Edited July 12, 2018 by piano0011

[ginerjm]

I may be wrong here but I don't think so.  When you use a class name such as in your use of 'information', you don't then reference it in your css as "div.information".  You need to define the 'information' class itself, not as a reference to the div tag's contents.

[piano0011]

I think I understand now.. roughly, I have to display it as inline block with a div class and it does work!

Edited July 12, 2018 by piano0011

[cyberRobot]

17 minutes ago, ginerjm said:

I may be wrong here but I don't think so.  When you use a class name such as in your use of 'information', you don't then reference it in your css as "div.information".  You need to define the 'information' class itself, not as a reference to the div tag's contents.

Either option is technically correct.

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

[cyberRobot]

31 minutes ago, piano0011 said:

thanks and I got it to work using the span element but just wondering how i can get it to work with div?

You would need to modify the display property of the <div> tag. For example,

div.information {
  display:inline;
  font-size: 16px;
  font-weight: bold;
}

More information can be found here:

https://css-tricks.com/almanac/properties/d/display/

[piano0011]

Thanks!

[ginerjm]

You would be mis-using html tags if you "forced" it.  That comes from a lack of learning about html as well as css.  As already mentioned though not driven home, there are inline elements (span for one) and there are 'box model' elements (div for one).  Use the appropriate instead of coming up with complex styling that makes it look like you want it to look.  If you have a piece that you want to re-style without losing your current 'position', then you use a span tag/element.  When you want to group a set of things in one place and be able to move it intact to a specific place you use a div tag/element and add a class or id attribute to it to link it to some css that controls how it appears on your page, ie, things such as border, size, location, relative location, spacing, color, text size and more.

While my previous point on this was deemed to be 'technically' correct here is how most css is coded.

You have a design element in your html such as a div box so you write it as such:

	<div class='main_box'>
	<p>asdl;fkjasd;lfkjasdf</p>
	<p>asd;flkjasdf;lkjasd;flkjasdf;lkj</p>
	</div>
	

Now you define that class in your css section as such:

	<style type='text/css'>
	.main_box
	{
	    position:relative;
	    float:left;
	    width:30%;
	    margin:1% 3% 1% 10%;
	    padding:10px;
	    border:1px solid black;
	    text-size:1em;
	}
    </style>
	

Now you have created a design template (basically) called 'main_box' which is a Class.  You can assign it to any div tag that may add on later and it will appear the same.  A more complex design may force you to take some elements out of this template and leave the basic design to be used by multiple items and place the removed items in their own class definition as well as alter some of those items and create a second class definition and then use the new classes as additional ones added to your html tag.  For ex.   You may want to alter the border on the main_box to something else for a second box.  Take the border out of this definition and create these:

	.yellow
	{
	    border:1px solid yellow;
	}
	.black
	{
	    border:1px solid black;
	}
	

(Remember to remove the border attribute from the .main_box definition)

In your html you alter the original div tag like this:

	<div class='main_box black'>
	

and create your new box

	<div class='main_box yellow'>
	(new stuff for the yellow box)
	</div>
	

What you will end up with is two boxed the same size next to each other one with a black border and the other with yellow.  They will be spaced by the margin settings.

Seems like a lot of work but if you don't start trying to understand and use things properly rather than bastardize them and force things to work, you will never do well at this.  And I won't even try to tell you how much you will hate yourself months later when you try to modify your work (having hopefully learned something by then) and are pulling your hair out while cursing your own stupidity.

 

Edited July 12, 2018 by Barand
Change <script> tags to <style>

[cyberRobot]

1 hour ago, ginerjm said:

You would be mis-using html tags if you "forced" it.

For what it's worth, I agree that in this particular example it would be better to use an inline element like the <b> or <strong> tag. However, it is worth knowing how to make a block elements act like inline elements and vice versa. When building mobile-friendly websites, for example, you may want certain tags to act one way on a mobile platform and a different way on non-mobile.

[piano0011]

Thanks for the explanation and advice!