CODEWITHSUNDEEP
phpcss
DragonFire
DragonFire

Reputation: 4092

Bring Element to Right of Another Element

I have two elements in a photo upload cropping tool which I am trying to bring in center and side by side.

    .imageuploadcropcontainer {
    	text-align:center;
    	margin: 0 auto;
    }
<div class="imageuploadcropcontainer">
        <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
        <div style="border:1px #e5e5e5 solid; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
            <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
        </div>

Image source with alt="Create Thumbnail is already in center, but image source alt="Thumbnail Preview" is on the left side of the page. If I put this element on float right then it goes to extreme right side of page, I do not want to use margins to set it, otherwise that is working.

Upvotes: 0

Views: 45

Answers (1)

caramba
caramba

Reputation: 22490

.imageuploadcropcontainer {
    margin: 0 auto;
    width: 300px;
}

.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
    width: 50%;
    float: left;
}

.imageuploadcropcontainer:after {
  content: '';
  display: block;
  clear: both;
}
<div class="imageuploadcropcontainer">
    <img src="" id="thumbnail" alt="Create Thumbnail" />
    <div class="hello" >
        <img src="#" alt="Thumbnail Preview" />
    </div>

Updated after comment question:

can i manipulate the space between the two

Sure you can, depending on what you exactly want. Right now there is no space between the two. See the green borders while running the next snippet.

.imageuploadcropcontainer {
    margin: 0 auto;
    width: 300px;
    border: solid 1px orange;
}

.imageuploadcropcontainer #thumbnail,
.imageuploadcropcontainer .hello {
    width: calc(50% - 2px);  /* 2px is border 1px left + 1px right from each box */
    float: left;
    border: solid 1px green;
}

.imageuploadcropcontainer:after {
  content: '';
  display: block;
  clear: both;
}
<div class="imageuploadcropcontainer">
    <img src="" id="thumbnail" alt="Create Thumbnail" />
    <div class="hello" >
        <img src="#" alt="Thumbnail Preview" />
    </div>

Upvotes: 1

Related Questions