Space between image and text

+1 Robert Summers · October 29, 2014
I am making a website and cannot get the text to shift to the right after adding in this image
______________
||||||||||||||||||||||||||||||The heading is hear
||||||||||||||||||||||||||||||The text is here shifted right against the image
||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||
-----------------------
Box = image

How do I get the text and heading to shift to the right so it looks like this
______________
||||||||||||||||||||||||||||||   The heading is hear
||||||||||||||||||||||||||||||   
||||||||||||||||||||||||||||||   The text is here shifted right against the image
||||||||||||||||||||||||||||||
-----------------------

Here is the CSS code
#main_section{
float: left;
width: 660px;
margin: 30px; /* 720px, 280 left */
}
#shop_article img{
float: left;
}
.shopArticleText{
clear: both;
width: 500px;
}


Here is the HTML code

<section id="main_section">
<article id="shop_article">
<header>
<h1 class="h1">Store - Clothing</h1><br/>
</header>
<img src="images\logo.png" width="163" height="147"/>
<h3 class="shopArticleText">Samurai Ju-jitsu, Mens T-Shirt</h3>
<p class="shopArticleTex">They're here! Samurai Ju-Jitsu Mens T-Shirts, available in Small, Medium and Large.</p>
</article>
</section>

THANKS FOR THE HELP
Kind regards 
Robert

Post a Reply

Replies

Oldest  Newest  Rating
+1 Samuel Oloruntoba · November 2, 2014
Dont use floats to remove spaces after images, this can easily be achieved using 

img {
display: inline-block;
vertical-align: middle;
}

by doing this it applies to all images and the spacing after images would go away.
0 Robert Summers · November 1, 2014
Okay, thank you for the help

Kind regards
Robert
0 Robert Summers · November 1, 2014
Okay I have managed this, I feel silly for asking this. 

Here is the HTML
<section id="main_section">
<article id="shop_article">
<form id="selectItemForm" action="" method=""> <!-- Use PHP and edit the file, edit the action and get attribute -->
<input id="shop_form" type="button" name="checkout" value="Checkout"/>
<header>
<h1 class="h1">Store - Clothing</h1><br/>
</header>
<div id="mensClothing">
<img class="mensImg" src="images\logo.png" width="163" height="147"/> <!-- This is the Samurai Jujitsu T-Shirt image, yet to import -->
<div class="shopArticleText">
<h3 class="mensHeader">Samurai Jujitsu, Mens T-Shirt</h3>
<p class="mensParagraph">They're here! Samurai Jujitsu Mens T-Shirts, available in Small, Medium and Large. Please select your size.</p>
</div>
<select id="dropdownShop">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<div id="ladiesClothing">
<img src="images\logo.png" width="163" height="147"/> <!-- This is the Samurai Jujitsu T-Shirt image, yet to import -->
<div class="shopArticleText">
<h3>Samurai Jujitsu, Ladies T-Shirt</h3>
<p>They're here! Samurai Jujitsu Ladies T-Shirts, available in Small, Medium and Large. Please select your size.</p>
</div>
<select id="dropdownShop">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
</form>
</article>
</section>


Here is the CSS
/* Styles the main content */ #main_section{
float: left;
width: 660px;
margin: 30px; /* 720px, 280 left */
}
/* Styles the mens clothing section */ #mensClothing{
float: left;
}
/* Styles the women's clothing section */ #ladiesClothing{
clear: both;
}
/* Floats the clothing pics to the left */ #shop_article img{
float: left;
}
/* Styles the shopping article */ .shopArticleText{
float: left;
padding-left: 6px;
padding-bottom: 16px;
width: 490px;
}
/* Style the paragraphs in the shopping article */ .shopArticleText p{
float: left;
padding-bottom: 2px;
width: 490px;
}
/* Down down menu for Small/Medium or Large size (T-Shirt) */ #dropdownShop{
float: left;
padding-left: 16px;
padding: 5px;
width: 80px;
border: 1px solid blue;
margin: 5px;
}
/* Styles the paragraph in the shopping article */ .shopArticleText p{
padding-top: 5px;
}
/* Shifts the shopping form to the right (Checkout) */ #shop_form{
float:right;
}


I have the boxes like this
_______________
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
-------------------------
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
-------------------------


How do I get them like this
_______________
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
-------------------------

_______________
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
-------------------------

Thanks for the help in return.

Kind regards
Robert
0 Ron Butcher · November 1, 2014
Add margin-bottom to #mensClothing, or margin-top to #ladiesClothing.  The value of the margin depends on how far apart you want them.


/* Styles the mens clothing section */ #mensClothing{
float: left;
margin-bottom: 35px;
}

35px is a decent spacing but it is up to you.
0 Robert Summers · November 1, 2014
Thanks man :)
0 Ron Butcher · October 29, 2014
Your shopArticleText class has a clear attribute which places it under the floated image.  You also have 660px to work with in your main section, but your image is 163px and the .shopArticleText is 500px.  Totaling 663px.

I would suggest wrapping the h3 and p tags in a div that is in the shopArticleText class instead of the individual items.  Adjust the width of the shopArticleText class to about 490 with padding-left at about 5px.  Set it to float: left as well so that it sits right next to the image.

Here is an example:

Your CSS Code:

#main_section{
float: left;
width: 660px;
margin: 30px; /* 720px, 280 left */
}
#shop_article img{
float: left;
}
.shopArticleText{
float: left;
padding-left: 5px; /* This is what moves it to the right, but remember to reduce the width as you expand this */
width: 490px;
}

And the HTML:

<section id="main_section">
<article id="shop_article">
<header>
<h1 class="h1">Store - Clothing</h1><br/>
</header>
<img src="images\logo.png" width="163" height="147"/>
<div class="shopArticleText">
<h3>Samurai Ju-jitsu, Mens T-Shirt</h3>
<p>They're here! Samurai Ju-Jitsu Mens T-Shirts, available in Small, Medium and Large.</p>
</div>
</article>
</section>


Hope that helps.
-1 Robert Summers · November 3, 2014
Okay I have done that and now the paragraphs have gone underneath the image instead of by the side


CSS

/* Styles the main content */ #main_section{
float: left;
width: 660px;
margin: 30px; /* 720px, 280 left */
}
/* Styles the mens clothing section */ #mensClothing{
margin-bottom: 35px;
}
/* Styles the women's clothing section */ #ladiesClothing{

}
/* Floats the clothing pics to the left */ #shop_article img{
    display: inline-block;
    vertical-align: center;
}
/* Styles the shopping article */ .shopArticleText{
padding-left: 6px;
padding-bottom: 16px;
width: 490px;
}
/* Style the paragraphs in the shopping article */ .shopArticleText p{
padding-bottom: 2px;
width: 490px;
}
/* Down down menu for Small/Medium or Large size (T-Shirt) */ #dropdownShop{
padding-left: 16px;
padding: 5px;
width: 80px;
border: 1px solid blue;
margin: 5px;
}
/* Styles the paragraph in the shopping article */ .shopArticleText p{
padding-top: 5px;
}
/* Shifts the shopping form to the right (Checkout) */ #shop_form{
float:right;
}
  • 1

HTML / CSS / Web Design

106,993 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators