CSS

+3 Robert Summers · November 22, 2014
I have some content 

_______________

|                             | Say this box is the image, I'm using the webkit I need it to 
|                             | display like this but it is displayed as below, I've tried using 
|                             | float but is not working, I'm thinking this is because I've used | |                             | webkit.
_______________


_______________
|                             | 
|                             |  
|                             | 
|                             | 
_______________


It's displayed like this so how can I get it display by the side like above since the float property is not working. Thanks for the help. 

Kind regards
Robert

Post a Reply

Replies

Oldest  Newest  Rating
+2 Bucky Roberts · November 22, 2014
Can you post your source code? The float property should work perfectly, you may have something weird going on...
+1 Predrag Kostic · November 22, 2014
I can't see what you mean, could you possibly draw squares representing the images in paint or similar and upload it here. Or share the part of the code that doesn't work.
+1 Bucky Roberts · November 22, 2014
Yes, or even take a screenshot of what you are trying to do. I can't tell what the problem is by the text  :unsure:
+1 Robert Summers · November 22, 2014
Okay here is the screenshot, my old copy this is but I need to polish the css up so this is my new version

/images/forum/upload/2014-11-22/5c8f53cb27528130ff2bee19ef646179.png

The text is displaying underneath on the top image and that's not what i need

I need the text to display on the side of the image like the bottom one.
I am using webkit and have tried the float property but it is not working. :/
+1 Franz Schmidt · November 22, 2014
Did you try 
-webkit-box-orient: horizontal;

And could you please post your code as well.
+1 Predrag Kostic · November 22, 2014
I agree with Bucky it should work unless there is something else interfering.
+1 Bucky Roberts · November 22, 2014
Run this in your browser. Let me know if that helps. 
<!DOCTYPE html>
<html>
<head>
<style>
img{
width: 100px;
float: left;
}
</style>
</head>
<body>
<img src="https://www.thenewboston.com/photos/users/2/resized/eac03a8959095ccb188efcea5aab7068.jpg">
This is text and I love ham
</body>
</html>
0 Robert Summers · November 23, 2014
Thanks Bucky that helped me. :)
0 Robert Summers · November 23, 2014
Okay just got another problem as to why I cannot still get a clear: both to work. What am I doing wrong?

/images/forum/upload/2014-11-23/0b03013dc8c34bb91952e3635af8c261.png

The Code

*{
margin: 0px;
padding: 0px;
}
header, hgroup, nav, section, article, aside, footer{
display: block;
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-align: center:
}
#big_wrapper{
border: 1px solid black;
max-width: 1000px;
margin: 20px auto;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#top_header{
background: gray;
}
#top_header img{
float: left;
}
#top_header h1{
padding: 20px;
font: bold 72px Xingkai SC;
color: red;
text-align: center;
}
#top_menu{
text-align: left;
padding: 5px;
background: #C4C4C4;
font: bold 14px Tahoma;
}
#top_menu a{
display: inline-block;
padding: 5px;
}
#main_content{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section{
border: 1px solid black;
margin: 10px;
padding: 20px;
text-align: left;
-webkit-box-flex: 1;
}
#main_section h1{
font: bold 20px Tahoma;
}
#shopping_article img{
display: block;
float: left;
width: 100px;
}
#side_bar{
clear: both;
width: 300px;
padding: 10px;
}
#the_footer{
border-top: 1px solid black;
text-align: center;
padding: 20px;
clear: both;
}
#fbplugin{
border: none; 
overflow: hidden; 
width: 290px;
height: 590px;
}

Thanks for the help in return
0 Predrag Kostic · November 23, 2014
Can't use clear:both with float.
What is the children-parent relationship of the images and the texts?

Float: http://www.w3schools.com/css/css_float.asp
Clear: http://www.w3schools.com/cssref/pr_class_clear.asp

Hope it helps
  • 1

HTML / CSS / Web Design

107,087 followers
About

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

Links
Moderators